Ces liens, bien souvent, chargent une nouvelle page contenant la totalité du message, ce qui ne me convenait pas, pas plus que les solutions utilisant AJAX et limitant le référencement auprès des moteurs de recherche.
Je me suis donc d'abord penché vers une solution en DHTML ne portant aucun préjudice aux personnes ne disposant pas / ne voulant pas de Javascript, ce que j'ai réussi à obtenir grâce à l'aide d'un des membres de ce forum.
Seulement, utiliser du Javascript me gênait quelque peu. J'ai donc cherché une solution en XHTML / CSS. J'y suis finalement parvenu.
Nécessite :
- Un navigateur qui reconnaît la norme CSS3
- Pour une automatisation du principe, PHP
Il s'agit de combiner le principe des ancres et de la pseudo-classe target. Celle-ci permet d'agir directement sur l'élément dont l'ID est donnée (et donc de le cacher / montrer, mais aussi de changer son style, etc.)
Limitations :
IE ne reconnaisssant pas la norme CSS3, j'ai utilisé des balises IF en HTML pour qu'il affiche la page entièrement développée, sans les liens pour cacher/montrer. Je n'ai pas testé avec Opéra.
Par ailleurs, ce système ne fonctionnant qu'avec les ID, il faut créer une ID unique pour chaque élément à masquer/montrer. Une légère modification dans le code PHP (dans un foreach affichant des résultats de requête par exemple, devrait suffire) côté XHTML/HTML mais côté CSS, vous devrez aussi créer ces ID, ce qui implique un style.php et non .css et impose la création d'une boucle foreach similaire dans ce fichier (+ probablement aussi la récupération de variables par la méthode GET). Je pense néanmoins que le jeu en vaut la chandelle.
Le code :
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>essai</title>
<style type="text/css">
#montrer {display: none;}
#cacher:target {display: none;}
#montrer:target {display: block;}
</style>
<!--[if IE]>
<style type="text/css">
#montrer {display: block;}
</style>
<![endif]-->
</head>
<body>
<!--[if !IE]> <--><p><a href="#montrer">Montrer le texte</a></p><!--> <![endif]-->
<div id="montrer">
<div id="cacher">
Texte à montrer.<!--[if !IE]> <--> <a href="#cacher">Cacher le texte</a><!--> <![endif]-->
</div>
</div>
</body>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>essai</title>
<style type="text/css">
#montrer {display: none;}
#cacher:target {display: none;}
#montrer:target {display: block;}
</style>
<!--[if IE]>
<style type="text/css">
#montrer {display: block;}
</style>
<![endif]-->
</head>
<body>
<!--[if !IE]> <--><p><a href="#montrer">Montrer le texte</a></p><!--> <![endif]-->
<div id="montrer">
<div id="cacher">
Texte à montrer.<!--[if !IE]> <--> <a href="#cacher">Cacher le texte</a><!--> <![endif]-->
</div>
</div>
</body>
Je tiens par ailleurs à faire remarquer qu'utilisé en combinaison avec le Javascript posté dans le forum correspondant (qui ne cache pas le contenu aux moteurs de recherche et ne gêne pas si Javascript n'est pas utilisé), il permet de toucher à la fois
- les visiteurs acceptant Javascript
- ceux ne le possédant pas/l'ayant désactivé et n'utilisant pas IE
J'espère que ce code servira à certains.
