Afficher masquer alternativement des divs selon leur id

Version imprimable

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 ...

22/03/2013, 17h15
SpaceFrog

suggestion:

Code:

document.getElementById('div'+n).style.display = "none";
22/03/2013, 17h29
trisbro

Malheureusement ca ne marche pas :(
22/03/2013, 17h44
SpaceFrog

Malheureusement tu n'as pas compris la piste et tu n'as pas su l'implémenter ..

http://jsfiddle.net/ywZTh/
22/03/2013, 18h23
Kaamo

Marrant comme exercice !
http://jsfiddle.net/hBmaF/

Comprends, analyse, pose des questions, le but c'est de comprendre ce qui se passe
23/03/2013, 08h01
dragonno

Citation:

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.

Essaie de voir si mon script javascript peut t'aider à actionner seulement un div tout en cachant les autres.

Je l'utilise pour faire apparaitre un panel parmi d'autres, en cliquant l'onglet que possède chaque panel, donc c'est un peu le même principe en fait.
Je sais plus où est mon lien essaie de le trouver dans "contributions" du forum javascript, ça parle d'onglets.

Pas mal les liens de Kaamo et spacefrog !!! Regarde-les !

A mort les ID :P
http://jsfiddle.net/hBmaF/1/

Code:

1
2
3
4
$('.bouton_tohide').on('click', function(){
    $('.bouton_tohide').val('En savoir plus ?').filter(this).val('Fermer');
    $('.tohide').slideUp(300).filter($(this).prev('.tohide')).slideDown(300);
});

Oui bon heu...je suis d'accord :mrgreen:

:ccool:

Faut que je me mette à cette méthode moi aussi, c'est nouveau pour moi ce $ là:(

Tu l'insère comment ce style d'écriture sur la page ? dans le body ou dans un JS que tu appelle avec le onload() ou dans une fonction par evènnement ?
Code:

1 2 3 4 $('.bouton_tohide').on('click', function(){ $('.bouton_tohide').val('En savoir plus ?').filter(this).val('Fermer'); $('.tohide').slideUp(300).filter($(this).prev('.tohide')).slideDown(300); });

23/03/2013, 14h46
SylvainPV

Le $ c'est jQuery. Généralement on lance le code via $(document).ready() :
http://api.jquery.com/ready/
23/03/2013, 14h50
dragonno

Ah merci, je m'étais dis qu'il fallait que je me lance un jour dans JQuery, j'ai jamais osé, bon bein je vais le faire :ccool:

Avant que tu postes, j'ai testé le code dans un onload() et ça m'a affiché erreur :

Citation:

Horodatage : 23/03/2013 13:55:30
Erreur : ReferenceError: $ is not defined
Ligne : 4

Mais comme je dois le télécharger, est-ce que les gens qui auront mes scripts devront le faire aussi ?
23/03/2013, 15h54
Kaamo

Niquel Sylvain ! Je ne savais pas qu'on pouvait utiliser jQuery :mrgreen:
dragonno : Il suffit d'inclure la dernière version de jquery
23/03/2013, 17h26
dragonno

Merci, mais par inclure tu veux dire "inclusion de fichier" comme en PHP ?

Mais les utilisateurs n'ont rien besoin de télécharger ? Je vais me renseigner sur Jquery je l'ai téléchargé là ;)

J'ai vu des tutos tout à l'heure, je vais en prendre :ccool:
24/03/2013, 02h23
SylvainPV

Non dragonno jQuery est une librairie JS, c'est à dire des fichiers de code Javascript comme ceux que toi tu peux écrire. Il suffit d'importer la librairie via une balise script et le navigateur de tes clients se chargera de les compiler et interpréter.

@Kaamo: je ne sais pas si l'auteur utilise jQuery mais dans le doute, je choisis la solution de facilité :mrgreen:

J'avais fais quelque chose comme ça mais en utilisant element.style.visibility="hidden" ou element.style.visibility="visible", mais je pense que ça doit marcher aussi avec display="none".

Disons que tes div aient de ID comme DIV0, DIV1, DIV2 ect.. et tes boutons B0, B1, B2 ect...

La fonction serait:

Code:

1
2
3
4
5
6
7
8
function afficher(val) {
     for (var i=0;i<nombreDeDIV;i++) {
          document.getElementById("DIV"+i).style.visibility="hidden";
          document.getElementById("B"+i).innerHTML="En savoir plus ??";
     }
     document.getElementById("DIV"+val).style.visibility="visible";
     document.getElementById("B"+val).innerHTML="FERMER FENETRE";
}

et tu l'associe à chacun des boutons:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
for (var i=0;i<nombreDeDIV;i++) {
     document.getElementById("B"+i).value=i;
     document.getElementById("B"+i).onclick=function() {
                                if (document.getElementById("DIV"+this.value).style.visibility=="visible") {
                                                                                              document.getElementById("DIV"+this.value).style.visibility="hidden";
                                                                                              this.innerHTML="En Savoir PLus ??";
                                                                                            }
                                else {
                                        afficher(this.value);
                                       }
                                }
}

24/03/2013, 15h06
dragonno

OK Merci SylvainPV :ccool:
25/03/2013, 09h33
SpaceFrog

Sans id => avec index ... (et Jquery)

http://jsfiddle.net/ywZTh/1/
ou
http://jsfiddle.net/ywZTh/2/

resolu!

probleme resolu !!

java script:

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
		<script type="text/javascript">
(
  function( )
  {
      var links = document.getElementsByTagName("a");
      for ( var i = 0; i < links.length; ++i )
      {
          var link = links[i];
          if ( link.id.substring(0,4) === "_div" )
          {
              link.onclick = changeDiv;
          }
      }
      var priorLink = null;
      function changeDiv( )
      {
          if ( priorLink == this )
          {
              // if same link clicked on again, just turn it back off
              this.innerHTML = "En savoir plus?";
              document.getElementById(this.id.substring(1)).style.display = "none";
              priorLink = null;
              return;
          }
          // in all other cases, turn off all divs...
          for ( var i = 0; i < links.length; ++i )
          {
              var link = links[i];
              if ( link.id.substring(0,4) === "_div" )
              {
                  var div = document.getElementById(link.id.substring(1));
                  div.style.display = ( link == this ) ? "block" : "none";
                  link.innerHTML = "En savoir plus?";
              }
          }
          this.innerHTML = "« Réduire fenêtre";
          priorLink = this;
      }
  }
)();
</script>