afficher masquer des divs

Version imprimable

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>

09/09/2011, 20h52
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....
10/09/2011, 08h59
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 !
10/09/2011, 11h28
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/>
10/09/2011, 11h40
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"]; ?>';

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>

13/09/2011, 14h42
chris801

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