Problème CSS sur Afficher/Masquer

Question

J'ai réalisé la fonction show/hide dans css. Mais ce n'est pas ce dont j'ai besoin. Je veux étendre le contenu couche par couche et les cacher tous en un clic. Et maintenant je ne peux pas étendre couche par couche.

Pouvez-vous m'aider avec ça? Merci beaucoup. :)

ici est le code et il est testé:

<script language="JavaScript"> 
    function toggle(id) { 
     var state = document.getElementById(id).style.display; 
      if (state == 'block') { 
       document.getElementById(id).style.display = 'none'; 
      } else { 
       document.getElementById(id).style.display = 'block'; 
      } 
     } 
</script> 
<style type="text/css"> 
#main{ 
    position:relative; 
    top:20px; 
    left:20px; 
    width:200px; 
    background: lightblue; 
} 
#hidden { 
    position:relative; 
    top:0px; 
    left:280px; 
    width:200px; 
    background: lightgrey; 
    display: none; 
} 
#hidden2 { 
    position:relative; 
    top:-20px; 
    left:580px; 
    width:200px; 
    background: lightgreen; 
    display: none; 
} 
#hidden3 { 
    position:relative; 
    top:100px; 
    left:0px; 
    width:200px; 
    background: lightpink; 
    display: none; 
} 
</style> 

<div id="main" onclick="toggle('hidden');toggle('hidden2');toggle('hidden3');"> 
1 
</div> 

<div id="hidden" onclick="toggle('hidden2');toggle('hidden3');"> 
1.1 
</div> 

<div id="hidden2"onclick="toggle('hidden3');"> 
1.1.1 
</div> 

<div id="hidden3"> 
1.1.1.1 
</div> 

Answer 1

Avez-vous envisagé d'utiliser un plug-in d'un cadre comme jQuery, Mootools, ou ExtJS au lieu d'essayer de réinventer la roue? Il semble que vous vouliez un treeviewer.

btw, vous utilisez javascript, ce n'est pas seulement CSS ... s'il vous plaît taguer javascript aussi bien.