HTML javascript toggle visibility of 'select' ie dropdown?

Question

I created a drop-down list and label and surrounded them in a div, however, when I get the div in the following function, it does not hide / show the label and the dropdown menu

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

I set the default visibility in css since I want the elements to be hidden and then show up when I click on the checkmark. This is problem? Does css always make 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 doesn’t work?

Answer 1

, JS style.display, CSS. , "none", , , "none" "" ( ).

, , :

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

, visibility display - . visibility , display , "". Div, display:none;, , div, visibility:hidden;. display, visibility.

Answer 2

( ):

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>

. , .

• display: none
• visibility:hidden

:

, : .