No replies
garcon1986
garcon1986's picture
Offline
newbie
Last seen: 11 years 49 weeks ago
Timezone: GMT+1
Joined: 2009-12-08
Posts: 1
Points: 2

I have realized show/hide function in css. But it's not what i need. i want to expand the content layer by layer and hide them all in one click. And now i can't expand it layer by layer.

here is the code and it's tested:

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

Can you help me with that? Thanks a lot. Smile