Javascript Form How to - Show and hide form controls

Question

We would like to know how to show and hide form controls.

Answer


<!--   w  ww . ja v  a 2s .c o m-->
<html>
<head>
<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>

The code above is rendered as follows: