sur expand, faire disparaître div et pas superposer

**laurentSc** · 18/11/2013, 00h01

Bonsoir,

j'ai 2 listes alignées verticalement. Dans la 1ère, il y a un bouton "expand" qui, si on clique dessus en fait apparaître une 3e ; normalement, je souhaite qu'elle remplace la 2e ; or, avec le code actuel, au lieu de remplacer celui-ci, elles se superposent et on voit encore la 2e sous la 3e : comment corriger le code pour que la 2e disparaisse (et réapparaisse sur "collapse") :

Code js :

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
function expand(id, expanded){
  var Item = document.getElementById(id); 
  if(expanded=== undefined){
    expanded = (Item.offsetWidth == 0); //toggle expanded state
  }
 
  Item.style.display = expanded ? "block" : "none"; 
  document.getElementById(id+'Bt').href = expanded ? "#expanded" : "#";
  document.getElementById(id+'Bt').innerHTML = expanded ? "Collapse" : "Expand";
  document.getElementById(id+'a').display="block"?"none":"block";
 
}
function init() {
    expand("test1", window.location.hash==="#expanded");
 
}

Code css :

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

1
2
3
4
5
.idclass {
position:absolute;
 
margin-left:0px;
}

Code html :

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
 <body onload="init()">
 
 
 
  	<ul>
 
	   <li>test1-0</li>
	<li><a id="test1Bt" href="#" onclick="expand('test1');">Expand</a></li>
				<div id="test1" class="idclass">
	   <li>test1-1</li>
	   <li>test1-2</li>
	   <li>test1-3</li>
	   <li>test1-4</li>
	   <li>test1-5</li>
	   <li>test1-6</li>
	   <li>test1-7</li>
	   <li>test1-8</li>
	   <li>test1-9</li>
	</ul>
</div>
 
	<ul>
 
 
		<li>test2-1</li>
		<li>test2-2</li>
		<li>test2-3</li>
 
	</ul> 
	</li>
 </ul> 
  </body>

**rodolphebrd** · 18/11/2013, 08h35

Bonjour,

il faut revoir les bases du HTML : les listes non-ordonnées

Et cet exemple se rapprochant de votre cas : http://www.developpez.net/forums/d13...l/#post7566959

**laurentSc** · 18/11/2013, 10h34

Merci de m'apporter une réponse ; j'ai un peu modifié le html en la lisant, mais le problème de superposition reste :

Code html :

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
  <body onload="init()">
 
  	<ul>
	   <li>test1-0</li>
	   <li><a id="test1Bt" href="#" onclick="expand('test1');">Expand</a></li>
	   <li>
 
<div id="test1" class="idclass">
	<ul>
	   <li>test1-1</li>
	   <li>test1-2</li>
	   <li>test1-3</li>
	   <li>test1-4</li>
	   <li>test1-5</li>
	   <li>test1-6</li>
	   <li>test1-7</li>
	   <li>test1-8</li>
	   <li>test1-9</li>
	</ul>
</div>
	   </li></ul>
 
	<ul>
		<li>test2-1</li>
		<li>test2-2</li>
		<li>test2-3</li>
	</ul> 
	</li>
 </ul> 
</body>
</html>

**rodolphebrd** · 18/11/2013, 14h21

Je cherche à comprendre...

Voulez-vous un résultat comme celui-ci ?

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul id="button"   onclick="hide()">
  <li>item 1</li>
    <li>item 1-1</li>
      <li>item 1-2</li>
  </ul>
<ul id="button2"  >
   <li>item 2</li>
    <li>item 2-1</li>
      <li>item 2-2</li>
  </ul>
<ul id="button3" onclick="show()">
   <li>item 3</li>
    <li>item 3-1</li>
      <li>item 3-2</li>
  </ul>

Code :

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

1
2
3
4
5
6
7
8
9
10
#button{
  background: salmon;
}
#button2{
  background: gray;
}
#button3{
  background: green;
   display: none;
}

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var button = document.getElementById("button");
var button2 = document.getElementById("button2");
var button3 = document.getElementById("button3");
var d3 = document.getElementById("d3");
 
function hide() {
    button2.style.display="none";
  button3.style.display="block";
 
}
 
function show() {
    button2.style.display="block";
   button3.style.display="none";
}

http://codepen.io/anon/pen/bsFuj

**laurentSc** · 18/11/2013, 15h00

Comme le codepen ne fonctionne pas (c'est entièrement vide), j'ai récupéré le code , et légèrement modifié le html :

Code html :

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
 <ul id="button">
      <li><a href="#" onclick="hide()">hide</a></li>
      <li>item 1</li>
      <li>item 1-1</li>
      <li>item 1-2</li>
    </ul>
    <ul id="button2">
      <li>item 2</li>
      <li>item 2-1</li>
      <li>item 2-2</li>
    </ul>
    <ul id="button3">
      <li><a href="#" onclick="show()">show</a></li>
      <li>item 3</li>
      <li>item 3-1</li>
      <li>item 3-2</li>
    </ul>

Au départ, bien sûr, on ne voit que le lien "hide" (et les 2 listes de id "button" et "button2"), mais si je clique sur le lien, il ne se passe rien (???)...mais de toute façon, si je comprends la logique, ça ne correspond pas à mon besoin : le besoin (dont je n'arrive pas à produire le code !), serait que sur la liste de id "button", il y ait un bouton "expand" et que si l'on clique dessus, ça remplace la liste de id "button2" par la liste de id "button3" (qui était, au début, en display:none ) (et que le bouton "expand" prenne la valeur "collapse")

**rodolphebrd** · 18/11/2013, 15h45

Code html :

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
<input id="button" type="button" value="element 1" onclick="hide()"><ul id="ul">
  <li>item 1</li>
    <li>item 1-1</li>
      <li>item 1-2</li>
  </ul>
<input id="button2" type="button" value="element 2" >
<ul id="ul2"  >
   <li>item 2</li>
    <li>item 2-1</li>
      <li>item 2-2</li>
  </ul>
<input id="button3" type="button" value="element 3" onclick="show()">
<ul id="ul3">
   <li>item 3</li>
    <li>item 3-1</li>
      <li>item 3-2</li>
  </ul>

Code :

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

1
2
3
4
5
6
7
8
9
10
#button, #ul{
  background: salmon;
}
#button2, #ul2{
  background: gray;
}
#button3, #ul3{
  background: green;
   display: none;
}

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var button = document.getElementById("button");
var button2 = document.getElementById("button2");
var button3 = document.getElementById("button3");
function hide() {
  button2.style.display="none";
  document.getElementById("ul2").style.display="none";
  button3.style.display="block";
   document.getElementById("ul3").style.display="block";
}
function show() {
    button2.style.display="block";
   document.getElementById("ul2").style.display="block";
  button3.style.display="none";
  document.getElementById("ul3").style.display="none";
}

note : le js est perfectible....

**laurentSc** · 18/11/2013, 16h13

J'espère que c'est perfectible, car là si je clique sur le bouton "élément1", il ne se passe rien (et comme j'avais un doute, j'ai fait l'essai sur mes 2 PCs...)

**rodolphebrd** · 18/11/2013, 16h17

J'ai édité mon code et l'ai corrigé, je n'avais pas copié le bon code.

Code :

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

1
2
3
4
5
6
7
8
9
10
#button, #ul{
  background: salmon;
}
#button2, #ul2{
  background: gray;
}
#button3, #ul3{
  background: green;
   display: none;
}

http://codepen.io/anon/pen/qCGke

**Torgar** · 18/11/2013, 16h31

Envoyé par laurentSc

J'espère que c'est perfectible, car là si je clique sur le bouton "élément1", il ne se passe rien (et comme j'avais un doute, j'ai fait l'essai sur mes 2 PCs...)

C'est un peu gonflé comme remarque !!!

Il a la gentillesse de te fournir du code, le minimum serait de le lire et de le comprendre afin de chercher une solution sans attendre bêtement que le correctif arrive sur son plateau.

**laurentSc** · 18/11/2013, 17h39

Envoyé par Torgar

le minimum serait de le lire et de le comprendre afin de chercher une solution

Je l'avais bien fait avant de poster, mais pas trouvé (certes, je ne l'avais pas dit)...et idem pour le code corrigé, sauf que je me suis dit qu'utiliser un nom réservé ("button") comme nom de id, ça n'allait pas donc l'ai remplacé par "idbutton" mais pas mieux...

**laurentSc** · 18/11/2013, 22h13

Je suis peut-être gonflé mais +1

car ça m'a aidé ; autant cet après-midi, quand j'allais sur le codepen, y avait rien, autant ce soir, ça marche...et quand j'ai recopié le code pour le lancer en local, j'ai du faire quelques modifs pour que ça marche aussi :

Code js :

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
var button2 = document.getElementById("button2");
var button3 = document.getElementById("button3");
 
function hide() {
  document.getElementById("button2").style.display="none";
  document.getElementById("ul2").style.display="none";
  document.getElementById("button3").style.display="block";
  document.getElementById("ul3").style.display="block";
}
 
function show() {
  document.getElementById("button2").style.display="block";
  document.getElementById("ul2").style.display="block";
  document.getElementById("button3").style.display="none";
  document.getElementById("ul3").style.display="none";
}

**laurentSc** · 19/11/2013, 16h27

Je viens de décocher "résolu" car je ne parviens pas à intégrer cela à l'existant ; voilà le code actuel :

Code js :

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
function expand(id, expanded){
  var Item = document.getElementById(id); 
  if(expanded=== undefined){
    expanded = (Item.offsetWidth == 0); //toggle expanded state
  }
 
  Item.style.display = expanded ? "block" : "none"; 
  document.getElementById(id+'Bt').href = expanded ? "#expanded" : "#";
  document.getElementById(id+'Bt').innerHTML = expanded ? "Collapse" : "Expand";
  document.getElementById(id+'Bt2').style.display="none" ? "block" : "none"; 
 
}
function init() {
    expand("test1", window.location.hash==="#expanded");
 
}

Code css :

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

1
2
3
4
5
6
7
#test1Bt2 {
display:none;
}
.class2 {
position:absolute;
margin-left:0px;
}

Code html :

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
<body onload="init()">
 
  	<ul>
	   <li>test1-0</li>
	   <li><a id="test1Bt" href="#" onclick="expand('test1');">Expand</a></li>
 
    </ul>	   
 
<div id="test1" class="class2">
	<ul>
	   <li>test1-1</li>
	   <li>test1-2</li>
	   <li>test1-3</li>
	   <li>test1-4</li>
	   <li>test1-5</li>
	   <li>test1-6</li>
	   <li>test1-7</li>
	   <li>test1-8</li>
	   <li>test1-9</li>
	</ul>
</div>
 
 
	<ul id="test1Bt2" class="class2">
		<li>test2-1</li>
		<li>test2-2</li>
		<li>test2-3</li>
	</ul> 
	</li>
 </ul>
  </body>
</html>

**NoSmoking** · 19/11/2013, 18h44

bonjour,

Envoyé par laurentSc

sauf que je me suis dit qu'utiliser un nom réservé ("button")...

réservé par qui ???

**laurentSc** · 19/11/2013, 18h51

Simple hypothèse faite hier, mais un essai fait ensuite montre que ça marche quand même...

**laurentSc** · 19/11/2013, 18h59

Je viens de décocher "résolu" car je ne parviens pas à intégrer cela à l'existant

J'ai trouvé !!!

J'ai simplement remplacé

Code js :

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

document.getElementById(id+'Bt2').style.display="none" ? "block" : "none";

par

Code js :

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

document.getElementById(id+'Bt2').style.display=expanded ? "none" : "block";

(simple intuition car je ne comprends pas pourquoi ça marchait pas avant...)

**rodolphebrd** · 19/11/2013, 19h04

C'est résolu depuis la réponse #11 alors ?

**laurentSc** · 19/11/2013, 20h27

Je l'avais cru, mais finalement, seulement depuis la #15...

**Bovino** · 20/11/2013, 07h51

Code :

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

document.getElementById(id+'Bt2').style.display="none" ? "block" : "none";

Mais d'où ça sort cette instruction ???
Décidément, tu ne comprends même pas les fondamentaux...

Code :

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

document.getElementById(id+'Bt2').style.display="none"

ça, c'est une affectation, équivalent booléen : true, ensuite, dans ton expression ternaire, tu indiques juste la chaine block... ce qu'il faut en faire, j'imagine que selon toi c'est le navigateur qui va le décider à ta place...

je ne comprends pas pourquoi ça marchait pas avant...

No comment...

**laurentSc** · 20/11/2013, 15h14

Décidément, tu ne comprends même pas les fondamentaux...

Si je les comprends (du moins celui-là) sauf que je me suis fait induire en erreur par les lignes précédentes, que d'ailleurs, je ne comprends pas, car vu qu'on passe bien de l'état "expand" à "collapse" (et inversement), ça prouve bien que les variables changent de valeur (block/none, expanded/# et Collapse/Expand)... De plus, dans aucune des lignes, à part la condition, il n'y a d'affectation et pourtant, on passe bien d'un état à l'autre...
En attendant, j'ai trouvé une écriture correcte pour ce que je voulais faire :

Code js :

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

document.getElementById(id+'Bt2').style.display =  document.getElementById(id+'Bt2').style.display== "block" ? "none" : "block";

sur expand, faire disparaître div et pas superposer

CSS

Discussions similaires

Partager

Partager