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

WRInaute passionné
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:
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:
<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:
<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 :?:
 
WRInaute impliqué
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:
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 :)
 
WRInaute passionné
Ca fonctionne pas.

Par contre, ça fonctionne comme ça :

Code:
<head>
<title></title>
<style type="text/css">
<!--
.java{
 color: #0000FF;
 cursor: pointer;
}
.baliseDiv{
 border: 2px ridge #AAAAAA;
}
//-->
</style>
 
<script type="text/javascript">
<!--
function switchDiv(n)
{  
var id;
  switch(n)
  { 
    case 0:
         id = "";
         break;
    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";
 
  if (id!="")
     document.getElementById(id).style.display = "block";
}
//-->
</script>
 
</head>
 
<body>
 
<span class="java" onclick="switchDiv(1)"> modifier la signature</span>&nbsp;|
<span class="java" onclick="switchDiv(2)"> envoyer un MP</span>&nbsp;|
<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><!--ferme baliseDiv -->
 
<div class="baliseDiv" style="display:none;" id="envoiMP">
envoiMP
<span class="java" onclick="switchDiv(0)"> Fermer</span>
</div><!--ferme baliseDiv -->
 
<div class="baliseDiv" style="display:none;" id="voirMP">
voirMP
<span class="java" onclick="switchDiv(0)"> Fermer</span>
</div><!--ferme baliseDiv -->
 
 
</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.
 
WRInaute accro
dans ton premier exemple, je vois :
document.getElementById('signature').display = "none";
tu n'a pas mis le "stye.display", juste "display"
 
WRInaute passionné
e-kiwi a dit:
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à.
 
WRInaute accro
c'est à dire ? tu veux tout le temps n'avoir qu'un div maximum d ouvert, ou pouvoir ouvrir et fermer independement chaque div ?
 
WRInaute passionné
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.
 
WRInaute impliqué
Euh mon script marche je l'ai essayé avant de le poster :)

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

Code:
<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:
<span class="java" onclick="switchDiv(1)"> modifier la signature</span>&nbsp;|
<span class="java" onclick="switchDiv(2)"> envoyer un MP</span>&nbsp;|
<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>
 
WRInaute passionné
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).
 
Nouveau WRInaute
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:
<!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">
<!--
function switchDiv(n)
{  
var id;
  switch(n)
  { 
    case 0:
         id = "";
         break;
    case 1:
         id = "gris";
         break;
    case 2:
         id = "vert";
         break;
    case 3:
         id = "rose";
         break;
	case 4:
         id = "marron";
         break;
    case 5:
         id = "jaune";
         break;	
   case 6:
         id = "violet";
         break;
  }  
  document.getElementById('gris').style.display = "none"; 
  document.getElementById('vert').style.display = "none";
  document.getElementById('rose').style.display = "none";
  document.getElementById('marron').style.display = "none"; 
  document.getElementById('jaune').style.display = "none";
  document.getElementById('violet').style.display = "none";

  if (id!="")
     document.getElementById(id).style.display = "block";
}
//-->
</script>



</head>
<style type="text/css">
<!--
.java{color: #0000FF; cursor: pointer;}
#contenuBg {margin-top:0; margin-left:auto; margin-right:auto; margin-bottom:0px; height:262px; width: 705px; padding: 0px 0px 0px 0px;}

#boiteMenuG{float: left; width: 119px; height: 262px; margin-left: auto; margin-right: 0px}


#boiteLic{float: left; width: 263px; height: 262px}

.boite1{ position:fixed; background-color:#CCCCCC; width: 263px; height: 262px; z-index: 1;}
.boite2{ position:fixed; background-color:#99CC66; width: 263px; height: 262px; z-index: 2;}
.boite3{ position:fixed; background-color:#FFCCFF; width: 263px; height: 262px; z-index: 3;}
.boite4{ position:fixed; background-color:#CC9900; width: 263px; height: 262px; z-index: 4;}
.boite5{ position:fixed; background-color:#FFFF33; width: 263px; height: 262px; z-index: 5;}
.boite6{ position:fixed; background-color:#CC99FF; width: 263px; height: 262px; z-index: 6;}

#boiteTexte{float: left; width: 268px; height: 262px}

#boiteMenuD{float: left; width: 55px; height: 262px; margin-right: auto}
-->
</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>
 
Nouveau WRInaute
Après avoir rechercher sur le net, j'ai essayé ce tuto et ça marche parfaitement bien mais je me demande comment je dois animé l'ouverture de DIV? car il s'ouvre brusquement sans animation ou transition.
Merci bien de votre réponse.
 
WRInaute accro
Il y a désormais bien plus simple en passant par des framework comme jQUery, et des fonctions de type toggle() (qui gèrent les effets).
 
Discussions similaires
Haut