Cacher / Montrer plusieurs divs
Bonjour,
Depuis quelques jours je suis confronter à un problème.
Je n'arrive pas à cacher plusieurs div, c'est à dire,
Quand je clique sur le div 1 cacher le div 1 mais quand je clique sur le div 2 ferme le div 2 et non pas le div 1
Voici mon code JS pour comprendre
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
|
<!--// [CDATA[
function divaffiche(){
document.getElementById("box_keywords").style.display = "block";
document.getElementById("cache").style.display = "inline";
document.getElementById("voir").style.display = "none";
}
function divcache(){
document.getElementById("box_keywords").style.display = "none";
document.getElementById("cache").style.display = "none";
document.getElementById("voir").style.display = "inline";
}
function divclose(){
document.getElementById("box_keywords").style.display = "none";
document.getElementById("box").style.display = "none";
document.getElementById("close").style.display = "none";
document.getElementById("cache").style.display = "none";
document.getElementById("voir").style.display = "none";
}
// ]] --> |
Puis dans mon html
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
|
<!--Premier DIV-->
<div id="box" class="left">
<span class="_title">
<b class="box_title"><?php if (isset($box_name)) { echo $box_name; }else { echo "Sans titre";} ?></b>
<!--Close-->
<a id="close" onClick="divclose()" style="display:inline;"/>
<img align="right" src="images/button/close.gif" alt="Fermer" title="Fermer" id="close">
</a>
<!--Restore-->
<a id="voir" onClick="divaffiche()" style="display:none;"/>
<img align="right" src="images/button/restor.gif" alt="Restaurer" title="Restaurer">
</a>
<!--Minimize-->
<a id="cache" onClick="divcache()" style="display:inline;"/>
<img align="right" src="images/button/minimize.gif" alt="Minimiser" title="Minimiser">
</a>
</span>
<div id="box_keywords">
<p>5sdsd</p>
</div>
</div>
<!--Second DIV-->
<div id="box" class="right">
<span class="_title">
<b class="box_title"><?php if (isset($box_name)) { echo $box_name; }else { echo "Sans titre";} ?></b>
<!--Close-->
<a id="close" onClick="divclose()" style="display:inline;"/>
<img align="right" src="images/button/close.gif" alt="Fermer" title="Fermer" id="close">
</a>
<!--Restore-->
<a id="voir" onClick="divaffiche()" style="display:none;"/>
<img align="right" src="images/button/restor.gif" alt="Restaurer" title="Restaurer">
</a>
<!--Minimize-->
<a id="cache" onClick="divcache()" style="display:inline;"/>
<img align="right" src="images/button/minimize.gif" alt="Minimiser" title="Minimiser">
</a>
</span>
<div id="box_keywords">
<p>5sdsd</p>
</div>
</div> |
Ce code s'affiche sous la forme de deux boite cote à cote (avec le css) j'ai mis qu'il soit cote à cote) Pour donner une illusion de boite fenêtrées qui peuvent se fermer.
+--------------------+ +-------------------+
|Titre 2 .............._ X| |Titre 1 .............._ X|
|............................| |............................|
|............................| |............................|
+--------------------+ +-------------------+
Le X représente FERMER (close.gif)et le _ (minimize.gif) Réduire car le X fait completement disparaitre le div alors que le _ cache le contenue et le remplace pare une autre image (restore.gif) restaurer voire l'image restaure de la fenêtre windows.
Merci à toust ceux qui vont répondre au message ;)
