by
8
3,496 Views
8 Badges
Top 1% !
Popular
Famous
Nice
Tagged
Specified
Debate
OpenSource
Popularity: 26th 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
Copy Embed Code
<iframe id="embedFrame" style="width:600px; height:300px;"
src="http://www.snip2code.com/Embed/18734/How-to-collapse-a-div-in-html?startLine=0"></iframe>
Click on the embed code to copy it into your clipboard Width Height
Leave empty to retrieve all the content Start End
<!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