Snip2Code is shutting down.
It has been quite a ride, since 2013 when we launched our first prototype: thanks to the effort of you guys we collected more than 3 million snippets!
We are very proud to help all our users to be more efficient in their jobs, and to be the central point to share programming knowledge for everyone.
Our basic service is free, so we always survived on our own resources to give you Snip2Code.
Unfortunately, we are no more in the financial position to sustain this effort, and therefore we are announcing here our permanent shut down,
which will take place on August 1st, 2020.
Please save your private snippets using our backup function in the settings, here.
IF YOU WANT TO SAVE SNIP2CODE, PLEASE CONSIDER DOING A DONATION!
This will allow us to pay for the servers and the infrastructure. If you want to donate, Contact Us!
by
8
7
91k
767
Top 1% !
Famous
Pearl of Wisdom
Tagged
Specified
Debate
OpenSource
Popularity: 18th place
Architecturex86_64
Languagehtml
LicenseMIT_X11

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.
Copy Embed Code
<iframe id="embedFrame" style="width:600px; height:300px;"
src="https://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