Alterner entre expand et collapse

**laurentSc** · 26/08/2013, 16h59

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 ?

**amoiraud** · 26/08/2013, 17h28

Salut,

Tu peut faire comme ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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';
}

**laurentSc** · 26/08/2013, 17h59

Excellent

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

**SpaceFrog** · 27/08/2013, 08h29

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**laurentSc** · 27/08/2013, 08h56

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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": 
	}

**Kaamo** · 27/08/2013, 09h17

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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";
}

**SpaceFrog** · 27/08/2013, 09h23

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 :

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
<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>

Alterner entre expand et collapse

JavaScript

Vue hybride

Discussions similaires

Partager

Partager