afficher masquer des divs [Résolu]

[chris801]

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 :

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 :

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 :

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>

[NoSmoking]

Bonsoir,
il te suffit, par exemple, de sauvegarder l'élément ouvert dans une variable, ainsi au prochain appel de la fonction, si l'élément est non nul, pour tenir compte du premier appel, alors tu le masques et tu sauvegardes le nouvel élément afficher et ainsi de suite....

[chris801]

merci de cette réponse,
simple et efficace,

j'ai parcouru notre ami gg, et trouvé que des solution compliquées,

une autre petite question,
comment transférer une variable de session en variable javascript
un simple

Code :

1
2
 
var  maV = <?php echo $_SESSION['maV']; ?>

fonctionne, je vais tester !

[Auteur]

bonjour,

une remarque sur le code HTML :
- écris les événements en minuscules : onclick et non Onclick.
- supprime le terme javascript: : c'est sans intérêt derrière un événement onxxxx. Garde ce terme uniquement pour les pseudo url :

Code :

<a href="javascript:taFonctionJS()">bla bla <a/>

[headmax]

Des quotes pour récupérer coté php est s'est la même chose pour les $_GET, $_POST, $_REQUEST, $_COOKIES, $_SERVER...

Code :

1
2
 
var  maV = '<?php echo $_SESSION["maV"]; ?>';

[NoSmoking]

allez pour compléter tout cela un petit exemple

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
.menu {
  color : #080;
  border : 1px solid #ccc;
  width : 200px;
  padding : 5px;
}
.on {
  color : #00f;
  font-weight : bold;
}
.hidden {
  display : none;
}
ul {
  margin-top : 0;
}
</style>
<script type="text/javascript">
var enCours = {
    obj : null,
    div : null
  };
function affiche( obj, div){
  if( enCours.obj){
    // supprime le style
    var sClass = enCours.obj.className.replace('on', '');
    enCours.obj.className= sClass;
    // masque
    enCours.div.style.display = 'none';
  }
  // modification aspect
  if((div = document.getElementById( div)))
    div.style.display = 'block';
  obj.className += ' on';
  // sauvegarde
  enCours.obj = obj;
  enCours.div = div;
}
</script>
</head>
<body>
<div class="menu" onclick="affiche( this, 'menu_1');">Menu #1</div>
<div class="hidden" id="menu_1">
  <ul>
    <li>Item #1.1</li>
    <li>Item #1.2</li>
    <li>Item #1.3</li>
  </ul>
</div>
<div class="menu" onclick="affiche( this, 'menu_2');">Menu #2</div>
<div class="hidden" id="menu_2">
  <ul>
    <li>Item #2.1</li>
    <li>Item #2.2</li>
    <li>Item #2.3</li>
  </ul>
</div>
<div class="menu" onclick="affiche( this, 'menu_3');">Menu #3</div>
<div class="hidden" id="menu_3">
  <ul>
    <li>Item #3.1</li>
    <li>Item #3.2</li>
    <li>Item #3.3</li>
  </ul>
</div>
</body>
</html>

[chris801]

super, merci pour toutes ces infos et précisions
ça marche nikel