how to hidden a form in javascript

Question

How do I hide a form and display it when a label is clicked?

<form id="form1" action="javascript:return true;" name="form1">
<input type="radio" name="group1" value="opt1" id="opt1" 
onclick="show()"><label for="opt1">Option 1</label><br>
<input type="radio" name="group1" value="opt2" id="opt2" 
onclick="show()"><label for="opt2">Option 2</label><br>
<input type="radio" name="group1" value="opt3" id="opt3" 
onclick="show()"><label for="opt3">Option 3</label><br>

<div id="droplist">
<select name="opt2-select">
<option value='opt2a'>Option 2A</option>
<option value='opt2b'>Option 2B</option>
<option value='opt2c'>Option 2C</option>
</select>
</div>
</form>

<label id="a" onclick="formenable()">click</label>....

function formenable()
{
var o=document.getElementById("form1");
o.style.visibility="hidden"
}

First the form should be hidden default. When the label is clicked the form should be displayed. How do I do that?

Answer 1

<form id="form1" action="javascript:return true;" name="form1" style="display:none">

---

<script>
function cl(obj) {
   div = document.getElementById(obj.id + 'div');
   div.style.display = (div.style.display == 'block') ? 'none' : 'block';
}
</script>

<label id="browser" onclick="cl(this)">Browser</label>

<div id="browserdiv" style="display: none">
    Browser stuff goes here

    <label id="os" onclick="cl(this)">OS</label>

    <div id="osdiv" style="display: none">
       OS stuff goes here
    </div>

</div>

With this, when you click on the Browser label, all of the 'os' still will appear/disappear, without having to do any extra hiding/showing. Probably not exactly what you want, but should get you started.

Answer 2

First you have to set CSS style display of that form to none . Then you can use eg. jQuery's .show() function .

CSS styles look like this:

form#form1 {
    display: none;
}