Alterner entre expand et collapse

Version imprimable

26/08/2013, 16h59
laurentSc

Alterner entre expand et collapse

Bonjour,

je poste ici car presque sûr que la solution est en javascript : ce que je voudrais, c'est un bouton qui, si l'on clique dessus, "expande" toutes les rubriques, et si on reclique, les "collapse". Donc en gros, pour ces rubriques, dans un cas, on met la propriété "display" à "block" et dans l'autre cas à "none", ce qui fait 2 fonctions ; mais comment faire pour que dans un cas, ce soit l'une qui soit appelée puis l'autre ?

Salut,

Tu peut faire comme ca :

Code:

1
2
3
4
5
6
 
if (document.getElementById('idDeTonElement').style.display == 'none') {
    document.getElementById('idDeTonElement').style.display = 'block';
} else {
    document.getElementById('idDeTonElement').style.display = 'none';
}

26/08/2013, 17h59
laurentSc

Excellent :ccool: ; une seule fonction et ce que je voulais faire marche.

Code:

1
2
monObj=document.getElementById('idDeTonElement')
monObj.style.display= (monObj.style.display == 'none')?'block':'none':

J'ai appliqué ton idée (qui semble simplifier les choses), mais ça ne marche plus ; pourquoi ?
Code:

1 2 3 4 5 for(i=1;i<=13;i++){ targetElement="Out"+i+"details"; Item = document.getElementById(targetElement); Item.style.display= (Item.style.display == "none")?"block":"none": }

Bonjour Laurent,

Car il a fait une petite faute de frappe. Si on regarde bien, la dernière ligne se termine par : au lieu de ; ;)
Code:

1 2 3 4 5 6 var i, targetElement, item; for(i=1;i<=13;i++){ targetElement = "Out"+i+"details"; item = document.getElementById(targetElement); item.style.display = (item.style.display == "none") ? "block" : "none"; }

Dans ton code le style n'est pas initialisé dans la balise mais appliqué en css.
style.display retourne "" du vide ...

il faut donc récupérer le style "calculé"
plusieurs possibilités : getComputedSTyle ...

ou plus simple : un element en display none a un offsetWidth de 0 ...

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
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 	
<script type="text/javascript">
function swap(){
for(i=0;i<=7;i++){
	targetElement="Out"+i+"details";
	Item = document.getElementById(targetElement);
	Item.style.display= (Item.offsetWidth == 0)?"block":"none"; 
	}
}
</script>
<style type="text/css">
.pair {background-color: red;
}
.impair {background-color: green;
}
.v{display:block;}
.i{display:none;}
</style>
</style>
</head>
<body>
<div id="Out0details" class="pair v">détails</div>
<div id="Out1details" class="impair i">détails</div>
<div id="Out2details" class="pair v">détails</div>
<div id="Out3details" class="impair i">détails</div>
<div id="Out4details" class="pair v">détails</div>
<div id="Out5details" class="impair i">détails</div>
<div id="Out6details" class="pair v">détails</div>
<input type="button" onclick="swap()" value='go' />
</body>
</html>

Merci pour vos 2 remarques ; par contre, Spacefrog, j'ai pas compris ton code car si je simplifie un peu, ça se rapproche plus de mon besoin :

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
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 	
<script type="text/javascript">
function swap(){
for(i=0;i<=7;i++){
	targetElement="Out"+i+"details";
	Item = document.getElementById(targetElement);
	Item.style.display= (Item.offsetWidth == 0)?"block":"none"; 
	}
}
</script>
 
</head>
<body>
<div id="Out0details">détails</div>
<div id="Out1details">détails</div>
<div id="Out2details">détails</div>
<div id="Out3details">détails</div>
<div id="Out4details">détails</div>
<div id="Out5details">détails</div>
<div id="Out6details">détails</div>
<input type="button" onclick="swap()" value='go' />
</body>
</html>