display:none does not work for label

Question

I have 2 ways of text input for the user - through an input text field, or by choosing a predefined text from a dropdown menu. Javascript controls which one is visible. So I have those 2 input methods and their corresponding 2 labels:

<h:form id="test">
<div>
  <h:outputLabel id="label_1" value="Your text:" style="display:block" />
  <h:inputText id="txt" value="#{myform.inputText}" style="display:block" />

  <h:outputLabel id="label_2" value="Choose text:" style="display:none" />
  <h:selectOneMenu id="drop" value="#{myform.inputText}" style="display:none">
    <f:selectItem itemValue="11" itemLabel="Preselected text 1" />
    <f:selectItem itemValue="22" itemLabel="Preselected text 2" />
  </h:selectOneMenu>
</div>
</h:form>

The javascript shows and hides the elements:

if (...) {
  document.getElementById('label_1').style.display="none";
  document.getElementById('txt').style.display="none";
  document.getElementById('label_2').style.display="block";
  document.getElementById('drop').style.display="block";
}
else {
  document.getElementById('label_1').style.display="block";
  document.getElementById('txt').style.display="block";
  document.getElementById('label_2').style.display="none";
  document.getElementById('drop').style.display="none";
}

So, it's either label_1 + txt or label_2 + drop Here is the problem: when the page loads, only label_1 + txt should be visible. Unfortunately, label_1, label_2 and txt are visible!

Why is drop's definition style="display:none" working and label_2's same definition is not?

Answer 1

Hide label

function Hide(id) {
    document.getElementById(id).style.visibility = "hidden";
}​

Hide('label_1');

Show label

function Show(id) {
    document.getElementById(id).style.visibility = "visible";
}

Show('label_1');

Answer 2

The solution was to add a jQuery block in a script in the body

$(document).ready(function() {
    $('[id$=label_2]').hide();
    $('[id$=drop]').hide();
});