Discussion :

[jokerag]

Bonjour à tous.

J'ai quelques soucis avec mon code javascript (je suis plus doué en php, mais il faut bien utiliser du js de temps en temps !).

Voilà ce que je souhaite faire:
Deux boutons, deux div.
Lorsque je clique sur le bouton 1, la div A s'ouvre.
Lorsque je clique sur le bouton 2, la div B s'ouvre.

Jusque là, rien de bien compliqué me direz vous.

Maintenant, ce que je veux, c'est que, lorsque je clique sur 1, si B est ouvert, il se ferme (une seule div ouverte à la fois).
De même, si je clique sur 2, B va s'ouvrir, mais je veux être sur que A soit fermée.


J'ai créé un code pour cela, ca fonction (you-hou).

Problème:

Je veux aussi que, lorsque je clique sur 1, si A est déjà ouvert, il se ferme.
Je veux aussi que, lorsque je clique sur 2, si B est déjà ouvert, il se ferme.

En résumé:
Clic: bouton 1:
- A est ouvert, il se ferme
- A n'est pas ouvert, il s'ouvre, et B se ferme (si ouvert)
Clic bouton 2:
- B est ouvert, il se ferme
- B n'est pas ouvert, il s'ouvre, et A se ferme (si ouvert).

Ca peut sembler simple... mais je n'y arrive pas !


Voici mon CSS:

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
 
<style type="text/css" media="all">
	/* Ce style CSS ne dois pas être enlevé, sinon les divs ne se cacherons pas ... */
	.cachediv {
		visibility: hidden;
		overflow: hidden;
		height: 1px;
		margin-top: -1px;
		position: absolute;
	}
	.showdiv {
		visibility:visible;
		overflow:visible;
	}
</style>

Mon 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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<script type="text/javascript">
	/*
	* Montre / Cache un div
	*/
	function DivStatus( nom, numero )
		{
			var divID = nom + numero;
 
			if ( document.getElementById && document.getElementById( 'mondiv1' ) ) // Pour les navigateurs récents
				{
					Pdiv1 = document.getElementById( 'mondiv1' );
					PcH1 = true;
		 		}
			else if ( document.all && document.all[ 'mondiv1' ] ) // Pour les veilles versions
				{
					Pdiv1 = document.all[ 'mondiv1' ];
					PcH1 = true;
				}
			else if ( document.layers && document.layers[ 'mondiv1' ] ) // Pour les très veilles versions
				{
					Pdiv1 = document.layers[ 'mondiv1' ];
					PcH1 = true;
				}
			else
				{
 
					PcH1 = false;
				}
 
 
			if ( document.getElementById && document.getElementById( 'mondiv2' ) ) // Pour les navigateurs récents
				{
					Pdiv2 = document.getElementById( 'mondiv2' );
					PcH2 = true;
		 		}
			else if ( document.all && document.all[ 'mondiv2' ] ) // Pour les veilles versions
				{
					Pdiv2 = document.all[ 'mondiv2' ];
					PcH2 = true;
				}
			else if ( document.layers && document.layers[ 'mondiv2' ] ) // Pour les très veilles versions
				{
					Pdiv2 = document.layers[ 'mondiv2' ];
					PcH2 = true;
				}
			else
				{
 
					PcH2 = false;
				}
 
		if ( divID == 'mondiv1' )		
			if ( PcH1 )
				{
					Pdiv1.className = ( Pdiv1.className == 'cachediv' ) ? '' : 'cachediv';
				}
				else{
					Pdiv1.className = ( Pdiv1.className == 'showdiv' ) ? '' : 'showdiv';
				}
			if ( PcH2 )
				{
					Pdiv2.className = ( Pdiv2.className == 'cachediv' ) ? '' : 'cachediv';
				}
		}
		if ( divID == 'mondiv2' )		
			if ( PcH2 )
				{
					Pdiv2.className = ( Pdiv2.className == 'cachediv' ) ? '' : 'cachediv';
				}
				else{
					Pdiv2.className = ( Pdiv2.className == 'showdiv' ) ? '' : 'showdiv';
				}
			if ( PcH1 )
				{
					Pdiv1.className = ( Pdiv1.className == 'cachediv' ) ? '' : 'cachediv';
				}
		}
 
}
 
 
</script>

Et un de mes divs (ils sont identiques, pas besoin d'en poster deux):

Code :

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

1
2
3
4
5
<div name="'mondiv1'" id="'mondiv1'" class="showdiv" >
        <div style="border: 1px solid black; background-color: whitesmoke; margin-bottom: 2px;">
CONTENU
        </div>
      </div>

J'utilisais un autre code précédement (plus compliqué), mais qui fonctionnait. J'appelais d'abord une fonction pour fermer toutes les div, puis une autre pour ouvrir celle que je voulais... le problème, c'est que je ne pouvais donc jamais tout fermer...

Pourriez-vous m'aider ?

Merci d'avance.

[vermine]

Bonjour,

Je ferais quelque chose du genre:

Code js :

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
 
function DivStatus(le_bouton)
{
   var div1 = document.getElementById("mondiv1");
   var div2 = document.getElementById("mondiv2");
 
   if(le_bouton == "bouton1")
   {
        if(div1.className == "cachediv")
              div1.className == "showdiv";
        else
              div1.className == "cachediv";
 
        if(div2.className == "showdiv")
              div1.className == "cachediv";
   }
   else
   {
        if(div2.className == "cachediv")
              div2.className == "showdiv";
        else
              div2.className == "cachediv";
 
        if(div1.className == "showdiv")
              div2.className == "cachediv";
   }
}

Veillez bien à déclarer vos variables Javascript avec "var".
Et les appels de la fonction:

Code :

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

1
2
3
 
DivStatus("bouton1");
DivStatus("bouton2");

Faites attention à vos doublages de quottes:

Code :

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

1
2
 
id="'div1'" //choisissez l'un (") ou l'autre (') mais pas les deux

[jokerag]

Merci du coup de main