Mega Code Archive

 
Categories / JavaScript DHTML / Form Control
 

Collapsing Forms

<html> <head> <title>Collapsing Forms</title> <style type="text/css"> </style> <script type="text/javascript"> window.onload=setup; function setup() {    document.getElementById('one').style.display='none';    document.getElementById('two').style.display='none'; } function show(newItem) {    var item = document.getElementById(newItem);    if (item.style.display=='none') {        item.style.display='block';    } else {        item.style.display='none';    } } </script> </head> <body> <form>     <div class="label" onclick="show('one')">Name(click me to expand)</div>     <div class="elements" id="one">         <label>First Name:</label><br /><input type="text" name="firstname" />     </div>     <div class="label" onclick="show('two')">Address(click me to expand)</div>     <div class="elements" id="two">         <label>Street Address:</label><br /><input type="text" name="street" />     </div> </form> </body> </html>