Javascript: montrer/cacher un DIV
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 ! :cry:
Voici mon CSS:
Code:
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:
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:
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 ? :oops:
Merci d'avance. :ccool:
