Afficher masquer alternativement des divs selon leur id
J'ai 11 <div> sur une page. A la base elles sont tous cachées. Chacune d'elle possède un bouton nommé: En savoir plus?. Lors du click sur le bouton, la <div> concerné apparait et le bouton change de nom pour: Fermé fenêtre.
Mes <div> sont aussi programme pour qu'il y en est seulement 1 d'ouverte a la fois. Donc si la <div1> est ouverte, lors du click sur la <div2>, la <div1> se ferme.
Le probleme arrive lorsque je click sur le bouton d'une des <div>, la <div> ouvre et le bouton change de nom comme prévu. Mais lorsque j'ouvre une 2e <div> la première se ferme MAIS garde le nom: fermé fenêtre.
Je veux que lorsqu'une <div> est fermé, sont bouton affilié sois toujours: En savoir plus?
javascript :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
| function switchDiv(n) {
var id;
var hide = 0;
switch(n) {
case 1 : id = "div1"; break;
case 2 : id = "div2"; break;
case 3 : id = "div3"; break;
case 4 : id = "div4"; break;
case 5 : id = "div5"; break;
case 6 : id = "div6"; break;
case 7 : id = "div7"; break;
case 8 : id = "div8"; break;
case 9 : id = "div9"; break;
case 10 : id = "div10"; break;
case 11 : id = "div11"; break;
}
if ( document.getElementById(id).style.display == "block" ) hide = 1;
document.getElementById('div1').style.display = "none";
document.getElementById('div2').style.display = "none";
document.getElementById('div3').style.display = "none";
document.getElementById('div4').style.display = "none";
document.getElementById('div5').style.display = "none";
document.getElementById('div6').style.display = "none";
document.getElementById('div7').style.display = "none";
document.getElementById('div8').style.display = "none";
document.getElementById('div9').style.display = "none";
document.getElementById('div10').style.display = "none";
document.getElementById('div11').style.display = "none";
if ( hide != 1 ) document.getElementById(id).style.display = "block";
}
oldTextAry = new Array();
function changeText (fieldObj, newTexStr) {
if (newTexStr == fieldObj.innerHTML) {
fieldObj.innerHTML = oldTextAry[fieldObj.id];
} else {
oldTextAry[fieldObj.id] = fieldObj.innerHTML;
fieldObj.innerHTML = newTexStr;
}
} |
html :
Code:
1 2 3 4
| <p class="choix">Carrière</p>
<div id="div1" style="display: none;">
</div>
<p class="savoir_plus"><a id="ferme_fenetre" href="#div1" onclick="switchDiv(1);changeText(this,'« Réduire fenêtre'); "><i>En savoir plus?</i></a></p> |
Merci de votre aide ...