Code javascript pour menu accordéon

Fermé
Nora5555 - 1 mars 2010 à 20:20
Bonjour,
Je cherche depuis un moment un code pour créer un menu accordéon sur une page de mon site. Mais reste un soucis, c'est que ça ne fonctionne que dans un sens (sauf pour la div2).

Si je clique sur "afficher la zone 4" puis "afficher la zone 5" : le contenu 4 s'affiche puis se cache pour laisser place au 5, c'est exactement l'effet recherché.

Par contre si je clique sur "afficher la zone 5" puis "afficher la zone 4" : les contenu 5 puis 4 s'affichent. Ce qui m'ennuie profondément.

Pourriez-vous me donner un coup de main svp, car là je sèche... je ne vois pas pourquoi ça marche pour la div 2 et pas les autres, je n'ai trouvé aucune différence dans le code mais j'avoue que je n'y connais pas grand chose.

Ou bien si vous en connaissez un autre moyen de créer ce type de menu (à savoir que mon site est crée en ligne à partir d'un éditeur, les fichier .js etc... ne peuvent pas être hébergé).

Merci beaucoup.

<script>
 
function visibilite(obj)
 {
  var div1=document.getElementById('Div1');
  var div2=document.getElementById('Div2');
  var div3=document.getElementById('Div3');
  var div4=document.getElementById('Div4');
  var div5=document.getElementById('Div5');
  var div6=document.getElementById('Div6');
  var div7=document.getElementById('Div7');
  var div8=document.getElementById('Div8');
  var div9=document.getElementById('Div9');
  var div10=document.getElementById('Div10');
 
	switch (obj) {
 
 
	              case ('Div1') : 	document.getElementById('Div2').style.display='none';
	              					document.getElementById('Div1').style.display='block';
	              					break;
	              case ('Div2') : 	document.getElementById('Div1').style.display='none';
	              					document.getElementById('Div2').style.display='block';
	              					break;
	              case ('Div3') : 	document.getElementById('Div2').style.display='none';
	              					document.getElementById('Div3').style.display='block';
	              					break;
	              case ('Div4') : 	document.getElementById('Div3').style.display='none';
	              					document.getElementById('Div4').style.display='block';
	              					break;
	              case ('Div5') : 	document.getElementById('Div4').style.display='none';
	              					document.getElementById('Div5').style.display='block';
	              					break;
	              case ('Div6') : 	document.getElementById('Div5').style.display='none';
	              					document.getElementById('Div6').style.display='block';
	              					break;
	              case ('Div7') : 	document.getElementById('Div6').style.display='none';
	              					document.getElementById('Div7').style.display='block';
	              					break;
	              case ('Div8') : 	document.getElementById('Div7').style.display='none';
	              					document.getElementById('Div8').style.display='block';
	              					break;
	              case ('Div9') : 	document.getElementById('Div8').style.display='none';
	              					document.getElementById('Div9').style.display='block';
	              					break;
	              case ('Div10') : 	document.getElementById('Div9').style.display='none';
	              					document.getElementById('Div10').style.display='block';
	              					break;
	}
 
	}
</script>
 
 <body>
 
 
<a href="javascript:visibilite('Div1');" id="Div1Link">Afficher la zone 1</a><br /><div id="Div1" style="display:none;"<br />contenu1</div><br />
 
<a href="javascript:visibilite('Div2');" id="Div2Link">afficher la zone 2</a><br /><div id="Div2" style="display:none;"<br />contenu2</div><br />
 
<a href="javascript:visibilite('Div3');" id="Div3Link">Afficher la zone 3</a><br /><div id="Div3" style="display:none;"<br />contenu3</div><br />
 
<a href="javascript:visibilite('Div4');" id="Div4Link">Afficher la zone 4</a><br /><div id="Div4" style="display:none;"<br />contenu4</div><br />
 
<a href="javascript:visibilite('Div5');" id="Div5Link">Afficher la zone 5</a><br /><div id="Div5" style="display:none;"<br />contenu5</div><br />
 
<a href="javascript:visibilite('Div6');" id="Div6Link">Afficher la zone 6</a><br /><div id="Div6" style="display:none;"<br />contenu6</div><br />
 
<a href="javascript:visibilite('Div7');" id="Div7Link">Afficher la zone 7</a><br /><div id="Div7" style="display:none;"<br />contenu7</div><br />
 
<a href="javascript:visibilite('Div8');" id="Div8Link">Afficher la zone 8</a><br /><div id="Div8" style="display:none;"<br />contenu8</div><br />
 
<a href="javascript:visibilite('Div9');" id="Div9Link">Afficher la zone 9</a><br /><div id="Div9" style="display:none;"<br />contenu9</div><br />
 
<a href="javascript:visibilite('Div10');" id="Div10Link">Afficher la zone 10</a><br /><div id="Div10" style="display:none;"<br />contenu10</div><br />
 
</html>
A voir également: