11548 sujets

JavaScript, DOM et API Web HTML5

Afficher/Cacher un contenu au clic sur son titre

Bonjour !

Je fais le lien vers ce vieux post (au lieu de le remonter) car l'exemple du CV est pile-poil ce que je recherche : http://forum.alsacreations.com/topic.php?fid=5&tid=31646

Je voudrais donc afficher et cacher du contenu au clic sur le titre qui le précède. J'ai repris l'excellent code de Koala64 et l'ai un peu modifié. Mon problème c'est qu'apparemment le lien sur le titre ne se crée pas.

Je ne peux pas mettre la page concernée en ligne pour le moment donc je vous met les codes correspondants :

HTML :

		<div class="derouler">
		
		<h3 id="CtrlPage1">Titre1</h3>
		<ul id="Page1">
			<li>Blabla qui va avec</li>
			<li>...</li>
		</ul>
			
		<h3 id="CtrlPage2">Titre2</h3>
		<ul id="page2">
			<li>Blabla qui va avec</li>
			<li>...</li>
		</ul>

                </div>


JS :

<script type="text/javascript">
function Init(ctrl, id)
{
	var oUl = document.getElementById(id);
	oUl.className = 'cache';
	var oH3 = document.getElementById(ctrl), oA = document.createElement('a'), oTxtA = document.createTextNode(oH3.firstChild.nodeValue);
	oA.href= '#';
	oA.appendChild(oTxtA);
	document.body.replaceChild(oA, oH3);
	oA.onclick = function() { Display(id); return false; };
};

function Display(id)
{
	var oUl = document.getElementById(id);
	oUl.className = (oUl.className == 'cache') ? 'montre' : 'cache';
}

window.onload = function()
{
	Init('CtrlPage1', 'page1');
	Init('CtrlPage2', 'page2');
	Init('CtrlPage3', 'page3');
	Init('CtrlPage4', 'page4');
	Init('CtrlPage5', 'page5');
	Init('CtrlPage6', 'page6');
	Init('CtrlPage7', 'page7');
	Init('CtrlPage8', 'page8');
};
</script>


CSS :

.derouler a{
	display: block;}
	
.derouler h3{
	background: url(../images/derouler.png) left top no-repeat;
	padding-left: 20px;
	line-height: 1em;}
	
.derouler h3 a:focus, .derouler h3 a:active {
	background: url(../images/derouler.png) left bottom no-repeat;}
	
.cache{
	display: none;}

.montre{
	display: block;}

#page1 li a, #page2 li a, #page3 li a, #page4 li a, #page5 li a, #page6 li a, #page7 li a, #page8 li a, #page9 li a, #page10 li a{
	background: white;
	display: inline;}


Désolée de la longueur Smiley confused ... Je ne trouve vraiment pas pourquoi le lien sur le titre ne se crée pas...

Merci d'avance de vos lumières !

Sandra
Re !

Génial ça marche ! Beaucoup plus simple et plus court.

Quelques questions cependant :

A quoi sert le "class" ? Il ne correspond apparemment à rien dans le css : 

<dt class="js active">Premier terme</dt>


Autre question si c'est possible éventuellement, ce ne sera que mieux :

Est-il possible d'ajouter un lien genre "Tout afficher / Tout masquer" ?

Merci encore !

Sandra
Sujet clos
Aller à