Cacher / Montrer plusieurs divs

[ghighi-du63000]

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

[Bovino]

Un id doit être unique dans la page

[ghighi-du63000]

Merci de votre réponce
Alors on fait comment. Je sais pas comment faire pour atribuer une autre ID avec DOM a un élément JS mais je crois que c'est par la. Mais je ne sais pas du tout comment faire
^^

[nadox]

Bonjour,
il ne s'agit pas de modifier l'id en Javascript mais de modifier le HTML afin qu'il soit valide...

[Rctiste]

Tu ne peut utiliser plusieurs fois le même id mais au lieu de définir ta balise :

Code :

<div id="tonId">

tu peux faire un

Code :

<div name="tonName>"

et ensuite dans ton javascript tu fais un

Code :

document.getElementsByName("tonName");

Sa a marché pour moi.

ps : ne pas oublier le S à Elements.