click me to see a magical box appear and disapear bellow.
The source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Show/Hide a box in javaScript</title> <style type="text/css"> body { margin: 0; padding: 0; } #content { border: 1px solid #f00; margin: auto; width: 1000px; } .hidden { background-color: #fff; border: 6px double #f00; display: none; margin-left: 250px; position: absolute; width: 500px; } </style> <script type="text/javascript"> function get(id) { return document.getElementById(id); } function show_hide(id) { if (get(id).style.display == "block") get(id).style.display = "none"; else get(id).style.display = "block"; } </script> </head> <body> <div id="content"> <p>click <a href="javascript:show_hide('the_box')">me</a> to see a magical box appear and disapear bellow.</p> <div class="hidden" id="the_box"> <p>look!</p> <p>a hidden box!</p> <p>aren't you impressed?</p> <p><a href="javascript:show_hide('the_box')">close me</a></p> </div> </div> </body> </html>