Javascript - Background & Documents Effects

Showing & Hiding div box

Simply copy and paste the following code inside your body tags and run it from a browser.
If you want to see the live result (we believe this is the best way to learn what is the script about), try it here (new window).

<script type="text/javascript"> <!-- function ShowHide(id) { obj = document.getElementsByTagName("div"); if (obj[id].style.visibility == 'visible'){ obj[id].style.visibility = 'hidden'; obj[id].style.height = '0px'; } else { obj[id].style.visibility = 'visible'; obj[id].style.height = 'auto'; } } //--> </script> <!-- Set the box as invisible at first --> <style type="text/css"> #lay{visibility:hidden;width:400px;height:0px;border:1px solid orange} </style> + <a href="javascript:ShowHide('lay')">Click here to show/hide the content</a><br /> <div id="lay">This is the text shown once the box is opened. Click again to close</div> <br /> Some text...

This script shows the simplest way to handle this kind of behave, it's easy to add features such as displaying a + when the box is closed and a - once opened.

Comments

Post another comment