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>