Discussion :

[psychoBob]

Bonjour,

J'ai deux div cachées que je souhaite afficher en un clic.
Manque de pot, une seule s'ouvre.

ça c'est mon code :

Code :

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

1
2
3
4
5
6
function switchMenuForum()
{
var formDiv=document.getElementById('Forum');
if(formDiv.style.display=="none") formDiv.style.display = "";
else formDiv.style.display= "none";
}

Et donc j'ai deux éléments qui ont l'id Forum.

==> Le premier dans la page ne s'ouvre pas, mais le second oui.

Comment faire ?

[kankrelune]

Code :

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

1
2
3
4
5
6
function switchMenuForum()
{
var formDiv=document.getElementById('Forum');
if(formDiv.style.display=="none") formDiv.style.display = "block";
else formDiv.style.display= "none";
}

@ tchaOo°

[psychoBob]

Salut Kankrelune,

ça fonctionne pas comme ça, je réexplique:

J'ai mis le code ci-dessus dans la balise head, le tiens puis le miens.
J'ai une div qui est cachée par défaut et qui se trouve en haut dans la code :

Code :

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

<div class="switchMenuForum" style="display:none;" id="Forum" ></div>

En dessous dans le code source de la page j'ai une seconde div :

Code :

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

1
2
3
<div class="menuGaucheCateg" onClick="switchMenuForum();">Forum </div>
  <div class="switchMenuForum" style="display:none;" id="Forum" >
</div>

C'est quand je clique sur cette seconde div, que les deux doivent s'ouvrir.
Aussi, que voulais dire block dans ton exemple Kankrelune ?

[kankrelune]

display = "block" => affiche
display = "none" => affiche pas

@ tchaOo°

[psychoBob]

Bah oui mais ça fonctionne pas.

[ryan]

Yop!

Et donc j'ai deux éléments qui ont l'id Forum.

Et getElementById ne retourne qu'un seul object et non une collection comme le ferait getElementsByName (note le S de elements).

Ryan

[psychoBob]

Oui en effet, ça parait évident.

Mais alors j'ai dû faire une faute ailleurs, parce que ça ne fonctionne toujours pas. En fait maintenant, plus rien ne s'ouvre.

ça c'est ma fonction :

Code :

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

1
2
3
4
5
6
function switchMenuForum()
{
var formDiv=document.getElementsByName('Forum');
if(formDiv.style.display=="none") formDiv.style.display = "";
else formDiv.style.display= "none";
}

ça c'est la première zone à afficher, en haut dans le code source :

Code :

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

 <div class="switchMenuForum" style="display:none;" name="Forum" >

Et ça c'est la seconde, et c'est aussi là que l'action doit s'effectuer sur les deux div, donc celle ci-dessus, via le onclick :

Code :

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

1
2
<div class="menuGaucheCateg" onClick="switchMenuForum();">Forum </div>
  <div class="switchMenuForum" style="display:none;" name="Forum" >

En fait j'ai simplement remplacé id par name dans les div. Mais j'ai aussi essayé avec id et c'est pareil

[kankrelune]

Code :

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

1
2
3
4
5
6
7
8
9
function switchMenuForum()
{
   var formDiv=document.getElementsByName('Forum');

   if(formDiv.style.display=="none")
        formDiv.style.display = "block";
             else 
                formDiv.style.display= "none";
}

@ tchaOo°

[psychoBob]

ouais bah tu peux te moquer mon pote, parce que j'ai essayé et ça foire aussi
(merci quand même pour le jolie coloriage du code)

M'enfin ça me fait pas rire c mon script qui foire

[MxPx_23]

Je crois que ton problème est comme 'ryan' dit:

Code :

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

Et getElementById ne retourne qu'un seul object et non une collection

Tu ne reçois pas les 2 objects alors forcément que les 2 n'apparaissent pas.

[kankrelune]

Bon... reprenons depuis le début... .. .

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
function switchMenuForum() 
{  
       var maDiv1 = document.getElementById('maDiv1');  
       var maDiv2 = document.getElementById('maDiv2'); 

       if(maDiv1.style.display=="none")  
       {
            maDiv1.style.display = "block";  
            maDiv2.style.display = "block";  
       }
       else
       {
            maDiv1.style.display= "none"; 
            maDiv2.style.display= "none"; 
       }
}

et pour finir... .. .

Code :

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

1
2
3
4
 
<input type="button" value="Click" onClick="javascript:switchMenuForum();" /><br />
<div class="menuGaucheCateg" style="display:none;" id="maDiv1">Ma div n° 1</div><br />
<div class="switchMenuForum" style="display:none;" id="maDiv2" >Ma div n° 2</div>

@ tchaOo°

[psychoBob]

ça fonctionne !

Et en plus le code est simple à comprendre.

Mais le résultat me plait pas

M'enfin ça c'est pas de votre faute. Merci !

[cuber]

Code :

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

1
2
3
4
5
6
function switchMenuForum()
{
var formDiv=document.getElementsByName('Forum');
if(formDiv.style.display=="none") formDiv.style.display = "";
else formDiv.style.display= "none";
}

ça c'est la première zone à afficher, en haut dans le code source :

Code :

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

 <div class="switchMenuForum" style="display:none;" name="Forum"  >

Et ça c'est la seconde, et c'est aussi là que l'action doit s'effectuer sur les deux div, donc celle ci-dessus, via le onclick :

Code :

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

1
2
<div class="menuGaucheCateg" onClick="switchMenuForum();">Forum </div>
  <div class="switchMenuForum" style="display:none;" name="Forum" >

Normal que ça marche pas , getElementsByName retourne un tableau et pas les elements voici une idée de code:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function switchMenuForum()
{
var i;
var formDiv=document.getElementsByName('Forum');
 
 for(i=0;i<formDiv.length;i++)
 {
 
       if(formDiv[i].style.display=="none") formDiv[i].style.display = "block";
       else formDiv[i].style.display= "none";
  }
 
}