HTML Javascript toggle visibility of 'select' ie dropdown?

Question

I've created a dropdown and label and surrounded them within a div, however, when i get the div in the following function, it doesnt hide/unhide the label and dropdown??

function ToggleDiv(DivID)
{
    if (document.getElementById(DivID).style.display == "none")
    {
        document.getElementById(DivID).style.display = "block";
    }
    else
    {
        document.getElementById(DivID).style.display = "none";
    }
}

i've set the default visibility to hidden in the css, as i want the elements to be hidden and then revealled when a checkbox is clicked. Is this the problem? Is the css always making the elements hidden??

#unis
{
    visibility:hidden;
}

<div class='row'>
    <label id='Recruitmentlbl' for='Recruitment'>Recruitment?:</label>
    <input id='Recruitment' name='Recruitment' class='formcbx' type='checkbox' onclick=ToggleDiv("unis")<br />
</div>

<div class='row'>
    <div id = "unis">
    <label id='Universitylbl' for='University'>University institution:</label>
    <select name="uni">
        <option value="uni1">uni1</option>
        <option value="uni2">uni2</option>
        <option value="uni3">uni3</option>
        <option value="uni4">uni4</option>
        <option value="uni5">uni5</option>
    </select><br />
    </div>
</div>

but its not working?

Answer 1

The problem is that JS can't really read the style.display that's set in the CSS. So when you test against "none" the actual value that could be returned might be "none" or "" (no string at all.)

It's annoying, but test against the positive like this:

function ToggleDiv(DivID)
{
    if (document.getElementById(DivID).style.display != "block")
    {
        document.getElementById(DivID).style.display = "block";
    }
    else
    {
        document.getElementById(DivID).style.display = "none";
    }
}

Also, visibility and display are not the same thing. Visibility sets whether an object can be seen and display sets whether it has "layout". A div that has display:none; takes up no space on the page, but a div that has visibility:hidden; does. So even if the code does toggle the display value, you also need to toggle the visibility value too.

Answer 2

In case you want to save yourself from some typing (it's also faster):

function ToggleDiv(DivID) {
    var style = document.getElementById(DivID).style;
    style.display = (style.display != "none") ? "none" : "block";
}​

HTML

<p onclick="ToggleDiv('box')">toggle box</p>
<div id="box" style="display:none"></div>

About the visibility vs display issue. The difference is simple if you view it from the user's perspective.

• display: none looks like the element has been removed
• visibility:hidden looks like the element has been hidden

You can see a demo here: visibility vs display

The main point is that the two is not interchangeable: setting one won't affect the other.