Discussion :

[trisbro]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

suggestion:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 document.getElementById('div'+n).style.display = "none";

[trisbro]

Malheureusement ca ne marche pas

[SpaceFrog]

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

http://jsfiddle.net/ywZTh/

[Kaamo]

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

Comprends, analyse, pose des questions, le but c'est de comprendre ce qui se passe

[dragonno]

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 !

[SylvainPV]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
});

[dragonno]

Oui bon heu...je suis d'accord



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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
});

[SylvainPV]

Le $ c'est jQuery. Généralement on lance le code via $(document).ready() :
http://api.jquery.com/ready/

[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

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

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 ?

[Kaamo]

Niquel Sylvain ! Je ne savais pas qu'on pouvait utiliser jQuery
dragonno : Il suffit d'inclure la dernière version de jquery

[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

[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é

[aku84]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
                                       }
                                }
}

[dragonno]

OK Merci SylvainPV

[SpaceFrog]

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

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

[trisbro]

probleme resolu !!

java script:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>