Bonjour

je dois afficher masquer des divs avec javascript, jusque la rien de bien sorcier !
j'arrive à afficher ou masquer, sauf que, j'aimerais lors du clic (pour afficher le div), masquer tous les autres div que j'aurais ouvert, je ne connais pas d’avance le nom des id ils peuvent varier.
et je dois en plus changer la class d'un autre élément.

le javascript que j'utilise actuellement :

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
 
// Raffréchir un div
// -------------------------
 
var xhr = null; 
function getXhr()
{
	if (window.XMLHttpRequest) {
//alert('niveau 12');
	xhr = new XMLHttpRequest(); 
	}
	else if (window.ActiveXObject)
	  { 
	  try{
		 xhr = new ActiveXObject("Msxml2.XMLHTTP");
		 }
	  catch (e) 
		 {
		 xhr = new ActiveXObject("Microsoft.XMLHTTP");
		 }
	  }
	else 
	  {
	  alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	  xhr = false; 
	  } 
	}
 
function ShowPage(cat_id,id)
{
 
getXhr();
 
xhr.onreadystatechange=function()     {
 
        if (xhr.readyState == 4) /* 4 : état "complete" */
        {
document.getElementById(id).innerHTML=xhr.responseText;
        }
     }
 
 
/* Préparation d'une requête asynchrone de type GET : */
xhr.open("GET","<?php echo URL_CONTROLEURS_MODULE; ?>general.php?vue=detail&id_traitement="+cat_id,true); 
/* Effectue la requête : */
xhr.send(null); 
 
}
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
 
function affiche_cache(nom,nom2) {
 
//alert(" nom1 : "+nom+" // Nom 2 : "+nom2); 
 
//var object = document.getElementById('bloc_2').getElementsByTagName('span');
 
var	chnageSpans = document.getElementById('bloc_2').getElementsByTagName('span');
	    chnageSpans.className = "menuRefs";
 
 
	if (document.getElementById(nom).style.display == "none") {
 
		document.getElementById(nom).style.display = "block";
		document.getElementById(nom2).className = "menuRefsHover";
		//document.getElementsByTagName('span').className = "menuRefsHover";
 
    } else {
        document.getElementById(nom).style.display = "none";
		document.getElementById(nom2).className = "menuRefs";
      }
   }
et mon html simplifié

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
 
 
       <p ><span Onclick="javascript:affiche_cache('refs_1','cat_1');" style="cursor:pointer;"   id="cat_1">
	    &nbsp; &nbsp; &nbsp; &nbsp; test1       </span></p>
 
 
 
	  <div id="refs_1" style="display:none; margin-bottom:8px; margin-top:15px; margin-left:30px;">
 
	  	   <span  Onclick="javascript:ShowPage(13,'bloc_1b');"><img src="modules/M_references/vues/img/1314621910-pa-accueil.jpg" width="30" height="30"></span> 
		   <span  Onclick="javascript:ShowPage(16,'bloc_1b');"><img src="modules/M_references/vues/img/1314622299-pa-accueil.jpg" width="30" height="30"></span> 
		   <span  Onclick="javascript:ShowPage(12,'bloc_1b');"><img src="modules/M_references/vues/img/1314621910-pa-accueil.jpg" width="30" height="30"></span> 
		   <span  Onclick="javascript:ShowPage(2,'bloc_1b');"><img src="modules/M_references/vues/img/1314621910-pa-accueil.jpg" width="30" height="30"></span> 
	    </div>
 
       <p ><span Onclick="javascript:affiche_cache('refs_3','cat_3');" style="cursor:pointer;"   id="cat_3">
	    &nbsp; &nbsp; &nbsp; &nbsp; test 32       </span></p>
 
 
 
	  <div id="refs_3" style="display:none; margin-bottom:8px; margin-top:15px; margin-left:30px;">
 
	  	   <span  Onclick="javascript:ShowPage(9,'bloc_1b');"><img src="modules/M_references/vues/img/1314637325-pa-accueil.jpg" width="30" height="30"></span> 
		   <span  Onclick="javascript:ShowPage(11,'bloc_1b');"><img src="modules/M_references/vues/img/1314621910-pa-accueil.jpg" width="30" height="30"></span> 
		   <span  Onclick="javascript:ShowPage(18,'bloc_1b');"><img src="modules/M_references/vues/img/1314621910-pa-accueil.jpg" width="30" height="30"></span> 
		   <span  Onclick="javascript:ShowPage(17,'bloc_1b');"><img src="modules/M_references/vues/img/1314622352-sp1.jpg" width="30" height="30"></span> 
	    </div>