Afficher/masquer un texte

Fermé
maschera - 9 mars 2012 à 22:06
 maschera - 11 mars 2012 à 20:57
Bonjour à tous,
Navré si cela a déjà été vu, mais malgré toutes mes recherches, je n'ai pas trouvé solution à mon problème !
La chose est simple : j'ai une page HTML avec des chapitres.
Ben... j'aimerais que le texte des chapitres soit pas affiché quand on ouvre la page. Mais genre, si on clique sur le titre du chapitre, ben le texte s'affiche.
Exemple :
[titre de la page]
[chapitre 1]
[chapitre 2]
[chapitre 3]

Quand on clique sur "chapitre 2", ça fait ça :
[titre de la page]
[chapitre 1]
[chapitre 2]
[texte du chapitre 2]
[chapitre 3]

Vous voyez ? Et j'aimerais aussi qu'on puisse re-masquer le texte.
Je sais qu'il n'est pas bien vu de presser, mais... il s'agit d'un travail universitaire à date butoir, donc je vous serais reconnaissant si vous pouviez me répondre assez rapidement !
Merci à tous :)
Au revoir !

3 réponses

Utilisateur anonyme
9 mars 2012 à 22:22
Bonsoir,
Je te propose ceci :
<script type="text/javascript">
function visibilite(thingId) {
	var targetElement;
	targetElement = document.getElementById(thingId) ;
	if (targetElement.style.display == "none") {
		targetElement.style.display = "" ;
	} else {
		targetElement.style.display = "none" ;
	}
}
</script>

<a onclick="javascript: visibilite('div1')" style="cursor: pointer">[titre de la page]</a>
<div id="div1" style="display:none">
	<a onclick="javascript: visibilite('div11')" style="cursor: pointer">[chapitre 1]</a><br>
	<div id="div11" style="display:none">[texte du chapitre 1]<br></div>
	<a onclick="javascript: visibilite('div12')" style="cursor: pointer">[chapitre 2]</a><br>
	<div id="div12" style="display:none">[texte du chapitre 2]<br></div>
	<a onclick="javascript: visibilite('div13')" style="cursor: pointer">[chapitre 3]</a><br>
	<div id="div13" style="display:none">[texte du chapitre 3]</div>
</div>
0
Bonsoir,
Peut-être que ce lien te permettras d'avancer dans ton projet : http://www.allhtml.com/forums/posts_list/topic:501700
Je l'ai testé sous IE9 et ça fonctionne...
0
mille merci, ça marche super bien ;)
0