Want to advertise here? Contact us!
by
4,187 38
8
1,810 Views
8 Badges
Top 1% !
Popular
Famous
Nice
Tagged
Specified
Debate
OpenSource
Popularity: 20th place
Created
Modified Jan 8, 2014
Languagehtml
Architecturex86_64

How to collapse a div in html

This code shows how to collapse a div using a simple Javascript method.
The div display option toggles between 'none' and 'block', hiding or showing its content.
In the example you can collapse the div clicking both on a link or on a div, using the onclick event.
post this code
<iframe id="embedFrame" style="width:600px; height:300px;" src="http://www.snip2code.com/Embed/18734/How-to-collapse-a-div-in-html"></iframe>
Click on the embed code to copy it into your clipboard Width:Height:
Leave empty to retrieve all the content First Line:Last Line:
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test</title>
		<script language="javascript"> 
function toggle(elementId) {
	var ele = document.getElementById(elementId);
	if(ele.style.display == "block") {
    		ele.style.display = "none";
  	}
	else {
		ele.style.display = "block";
	}
} 
</script>
	</head>
	<body>
<div class="tree">
<div>
BLA BLA
</div>	
<a id="displayText" href="javascript:toggle('toggleText');">show</a> <== click Here
<div onclick="javascript:toggle('toggleText');">
<h1>Hello!</h1>
<div id="toggleText" style="display:none; border-width:2px; border-style:solid">Hidden data...</div>
</div>
<div>
BLA
</div>	
<div>
BLA BLA 
</div>	
<div>
BLA BLA 123
</div>
<a id="displayText" href="javascript:toggle('toggleText2');">show</a> <== click Here
<div id="toggleText2" style="display: none" href="javascript:toggle();"><h1>Hide!</h1></div>	
</div></body>
</html>
If you want to be updated about similar snippets, Sign in and follow our Channels

blog comments powered by Disqus