Javascript : ouvrir une div, qui se ferme si autre ouverte

le Dim Mai 13, 2007 20:27

Bonjour,

Voilà, j'ai trois div. J'en ouvre une en cliquant sur un lien. Si je reclique sur le lien, elle se referme. Si je clique sur le lien d'une autre div qui s'ouvre aussi en javascript, alors la précédente doit se refermer.

Ca fonctionne pas . :cry:

Voilà mon chetit code :

Balise head :

Code: Tout sélectionner: function switchDiv(n) { var id; switch(n) { case "1": id = "signature"; break; case "2": id = "envoiMP"; break; case "3": id = "voirMP"; break; } document.getElementById('signature').display = "none"; document.getElementById('envoiMP').display = "none"; document.getElementById('voirMP').display = "none"; document.getElementById(id).display = "block"; }

Les liens :

Code: Tout sélectionner: <span class="java" onClick="switchDiv(1);"> modifier la signature</span> <span class="java" onClick="switchDiv(2);"> envoyer un MP</span> <span class="java" onClick="switchDiv(3);"> voir les MP</span>

Les divs à ouvrir :

Code: Tout sélectionner: <div class="baliseDiv" style="display:none;" id="signature">texte 1 </div> <div class="baliseDiv" style="display:none;" id="envoiMP"> texte 2</div> <div class="baliseDiv" style="display:none;" id="voirMP"> texte 3 </div>

Voyez-vous le problème, SVP :?:

le Lun Mai 14, 2007 2:00

Avec
document.getElementById(id).style.display = "block"
ca fonctionnera mieux

et aussi pour les "case", pas besoin de guillemets vu que c'est des valeurs numériques

ce qui donne :

Code: Tout sélectionner: function switchDiv(n) { var id; switch(n) { case 1 : id = "signature"; break; case 2 : id = "envoiMP"; break; case 3 : id = "voirMP"; break; } document.getElementById('signature').style.display = "none"; document.getElementById('envoiMP').style.display = "none"; document.getElementById('voirMP').style.display = "none"; document.getElementById(id).style.display = "block"; }

voualou

le Lun Mai 14, 2007 13:33

Ca fonctionne pas.

Par contre, ça fonctionne comme ça :

Code: Tout sélectionner: <head> <title></title> <style type="text/css">  </style> <script type="text/javascript">  </script> </head> <body> <span class="java" onclick="switchDiv(1)"> modifier la signature</span> | <span class="java" onclick="switchDiv(2)"> envoyer un MP</span> | <span class="java" onclick="switchDiv(3)"> voir les MP</span> <br /> Les divs : <div class="baliseDiv" style="display:none;" id="signature"> signature <span class="java" onclick="switchDiv(0)"> Fermer</span> </div> <div class="baliseDiv" style="display:none;" id="envoiMP"> envoiMP <span class="java" onclick="switchDiv(0)"> Fermer</span> </div> <div class="baliseDiv" style="display:none;" id="voirMP"> voirMP <span class="java" onclick="switchDiv(0)"> Fermer</span> </div> </body> </html>

Mais je n'arrive pas à faire en sorte que la div ouverte se referme aussi quand on clique sur le lien qui l'a ouvert.

le Lun Mai 14, 2007 14:09

dans ton premier exemple, je vois :
document.getElementById('signature').display = "none";
tu n'a pas mis le "stye.display", juste "display"

le Lun Mai 14, 2007 14:12

e-kiwi a écrit:dans ton premier exemple, je vois :
document.getElementById('signature').display = "none";
tu n'a pas mis le "stye.display", juste "display"

Euh oui, mais c'est corrigé maintenant, ça fonctionne :wink:

C'est pour refermer la div en cliquant sur le lien qui l'a ouverte, que j'ai un problème, là.

le Lun Mai 14, 2007 15:31

c'est à dire ? tu veux tout le temps n'avoir qu'un div maximum d ouvert, ou pouvoir ouvrir et fermer independement chaque div ?

le Lun Mai 14, 2007 16:27

En fait :

- Je clique sur le lien -> la div correspondante s'ouvre : ça fonctionne.

- Je clique sur le lien "fermer" dans la div qui s'est ouverte -> la div correspondante se ferme : ça fonctionne.

- Une div est déjà ouverte, je clique sur un autre lien pour ouvrir une autre div -> la div déjà ouverte se referme et la nouvelle s'ouvre : ça fonctionne.

- Je clique sur un lien pour ouvrir la div et je reclique sur le même lien pour la refermer : ça, ça ne fonctionne pas.

le Lun Mai 14, 2007 17:25

Euh mon script marche je l'ai essayé avant de le poster

et en le modifiant j'ai obtenu ce que tu voulais :

Code: Tout sélectionner: <script type="text/javascript"> function switchDiv(n) { var id; var hide = 0; switch(n) { case 1 : id = "signature"; break; case 2 : id = "envoiMP"; break; case 3 : id = "voirMP"; break; } if ( document.getElementById(id).style.display == "block" ) hide = 1; document.getElementById('signature').style.display = "none"; document.getElementById('envoiMP').style.display = "none"; document.getElementById('voirMP').style.display = "none"; if ( hide != 1 ) document.getElementById(id).style.display = "block"; } </script>

et le html

Code: Tout sélectionner: <span class="java" onclick="switchDiv(1)"> modifier la signature</span> | <span class="java" onclick="switchDiv(2)"> envoyer un MP</span> | <span class="java" onclick="switchDiv(3)"> voir les MP</span> <div class="baliseDiv" style="display:none;" id="signature"> signature <span class="java" onclick="switchDiv(1)"> Fermer</span> </div> <div class="baliseDiv" style="display:none;" id="envoiMP"> envoiMP <span class="java" onclick="switchDiv(2)"> Fermer</span> </div> <div class="baliseDiv" style="display:none;" id="voirMP"> voirMP <span class="java" onclick="switchDiv(3)"> Fermer</span> </div>

le Mar Juin 05, 2007 17:56

Ca a l'air de fonctionner merci :-)

(avec trois plombes de retards, mais j'étais passé à autre chose) !

Ca fonctionne sur IE 6 et compagnie ? (j'ai testé que sur firefox et IE7).

le Jeu Juin 07, 2007 19:02

merci bcp grace à ce p'tit bout eud'code j'ai solutionné un gros problème que j'avais !

le Jeu Jan 29, 2009 19:57

Salut,

Un grand merci !!! Je n'y connais absolument rien en js, je bidouille juste un peu avec dreamweaver qui se charge de générer le codage de la page.
Donc, après moult galères, j'ai reussi grace à ton exemple à ouvrir successivement des div via des liens situés dans un autre div. En fait j'ai un div principal divisé en 2 "div" l'un à coté de l'autre et je voulais des liens texte dans le 1er div enfant pour faire apparaitre le contenu lié dans le second div enfant pour le faire fonctionner comme une frame.

J'ai trafficoté ton code à mes besoins et ça marche (du moins sous IE7, je n'ai pas d'autres navigateurs).

Encore merci, ci dessous ma "soupe" (version simplifiée avec des fonds couleurs)
Ceci-dit, peut etre y aurait il eu plus simple pour mettre en place le rendu final ?

Code: Tout sélectionner: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Document sans nom</title> <script type="text/javascript">  </script> </head> <style type="text/css">  </style> <body> <div id="contenuBg"> <div id="boiteMenuG"> <p><span class="java" onclick="switchDiv(1)"> gris </span></p> <p><span class="java" onclick="switchDiv(2)"> vert </span></p> <p><span class="java" onclick="switchDiv(3)"> rose </span></p> <p><span class="java" onclick="switchDiv(4)"> marron</span></p> <p><span class="java" onclick="switchDiv(5)"> jaune</span></p> <p><span class="java" onclick="switchDiv(6)"> violet</span></p> </div> <div id="boiteLic"></div> <div id="boiteTexte"> <div class="boite1" style="display:block;" id="gris"></div> <div class="boite2" style="display:none;" id="vert"></div> <div class="boite3" style="display:none;" id="rose"></div> <div class="boite4" style="display:none;" id="marron"></div> <div class="boite5" style="display:none;" id="jaune"></div> <div class="boite6" style="display:none;" id="violet"></div> </div> <div id="boiteMenuD"></div> </div> </body> </html>

Javascript : ouvrir une div, qui se ferme si autre ouverte

Javascript : ouvrir une div, qui se ferme si autre ouverte

MERCI !

Re: Javascript : ouvrir une div, qui se ferme si autre ouverte

Formation recommandée sur ce thème :

Lectures recommandées sur ce thème :

Qui est en ligne