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

M
Meeuuuhhh
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 :?:
 
N
NxtGen
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 :)
 
M
Meeuuuhhh
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.
 
E
e-kiwi
WRInaute accro
dans ton premier exemple, je vois :
document.getElementById('signature').display = "none";
tu n'a pas mis le "stye.display", juste "display"
 
M
Meeuuuhhh
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"
Cliquez pour agrandir...

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à.
 
E
e-kiwi
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 ?
 
M
Meeuuuhhh
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.
 
N
NxtGen
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>
 
M
Meeuuuhhh
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).
 
K
klochett
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>
 
W
webdevelop
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.
 
UsagiYojimbo
UsagiYojimbo
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).
 
Vous devez vous connecter ou vous inscrire pour répondre ici.
1.fr
Discussions similaires
I
Comment ouvrir un lien en _blank dans un javascript
Réponses
7
Affichages
11K
ynizon
Y
K
Ouvrir une fenetre sans javascript
Réponses
9
Affichages
10K
kobcreation
K
jeromax
Javascript: ouvrir un onglet sous firefox
Réponses
11
Affichages
16K
HawkEye
H
O
Petit problème javascript
Réponses
19
Affichages
2K
ortolojf
O
O
Commet rabouter en Javascript une sous-array à une array ?
Réponses
8
Affichages
2K
ortolojf
O
S
API JavaScript Fetch : Comment gérer les données JSON
Réponses
1
Affichages
1K
ortolojf
O
E
Problème d'affichage de contenu lorsque JavaScript est désactivé - Besoin d'aide SEO
Réponses
1
Affichages
2K
emualliug
E
O
Deux questions pour deux scripts javascript.
Réponses
4
Affichages
1K
ortolojf
O
O
Pages dynamiques avec Javascript ?
Réponses
2
Affichages
1K
ortolojf
O
mickou51
[JavaScript Array] modifier un code html sans le supprimer/recréer
Réponses
2
Affichages
1K
ABCWEB
ABCWEB
O
Le javascript protège-t-il du copiage HTML ?
Réponses
19
Affichages
2K
ortolojf
O
sigma2008
Tester une URL avec Javascript
Réponses
3
Affichages
4K
rick38
rick38
sigma2008
jour en javascript
Réponses
1
Affichages
2K
colonies
colonies
teralgo
référencement site full javascript
Réponses
8
Affichages
1K
teralgo
teralgo
F
Javascript et preloader
Réponses
9
Affichages
2K
Furtif
Furtif
O
Javascript API cache query non url ?
Réponses
8
Affichages
2K
ortolojf
O
O
Comment lancer du Javascript sans html ?
Réponses
7
Affichages
3K
ortolojf
O
KOogar
Pop up javascript + cookie
Réponses
12
Affichages
2K
colonies
colonies
P
Du php dans du javascript
Réponses
11
Affichages
2K
poupilou
P
Y
Editer document Word avec Javascript
Réponses
2
Affichages
2K
Yassin_Ads
Y
Haut