I would like a certain 'div' to be visible when i select a radio button and would like the same div to get hidden when i select the other radio button. How can i achieve this. Below is my attempt. Please let know what is wrong here.

    <label>For State govt. Ex- Employee
<span class="small">Select if you are a state govt. ex-employee</span>
</label>
<p>
  <label>Yes</label>
  <input type="radio" name="stateGov" id="stategov" value="yes" class="choice" onClick="stateGovOptions()"/>
  <label>No</label>
  <input type="radio" name="stateGov" id="stategov" value="no" class="choice" onClick="stateGovOptions()"/>
</p>

<!-- State govt. ex- employees  -->
<div id="stateOptions" style="visibility:hidden">
<label>
<span class="small">Select </span>
</label>
<p>
<select title="stateGovExEmp" name="stateGovExEmp" id="fdivision">
    <option value="state_gov_lev_not_sel">--Select Level At Which Worked At State --</option>
    <option value="less">Less than or equal to one year</option>
    <option value="between">More then one but less than two years</option>
    <option value="more">More than two years</option>   
</select>
</p>
</div>

when the 'yes' radio button is selected the div with the id 'stateoptions' should be visible and when the 'no' radio button is pressed it should get hidden again. To achieve this below is my js attempt.

/* displays the contents when state gov ex-employee selected and removes it when not selected */
function stateGovOptions()
{
    if(document.getElementById('stategov').value == 'yes')
        document.getElementById('stateOptions').setAttribute('style','visibility:visible');
    else
        document.getElementById('stateOptions').setAttribute('style','visibility:hidden');
}

Pressing the yes button displays the required div, but pressing the no button also makes it visible, despite the 'else' block in the js function.

Please explain what am i missing out here.

I would like a certain 'div' to be visible when i select a radio button and would like the same div to get hidden when i select the other radio button. How can i achieve this. Below is my attempt. Please let know what is wrong here.

    <label>For State govt. Ex- Employee
<span class="small">Select if you are a state govt. ex-employee</span>
</label>
<p>
  <label>Yes</label>
  <input type="radio" name="stateGov" id="stategov" value="yes" class="choice" onClick="stateGovOptions()"/>
  <label>No</label>
  <input type="radio" name="stateGov" id="stategov" value="no" class="choice" onClick="stateGovOptions()"/>
</p>

<!-- State govt. ex- employees  -->
<div id="stateOptions" style="visibility:hidden">
<label>
<span class="small">Select </span>
</label>
<p>
<select title="stateGovExEmp" name="stateGovExEmp" id="fdivision">
    <option value="state_gov_lev_not_sel">--Select Level At Which Worked At State --</option>
    <option value="less">Less than or equal to one year</option>
    <option value="between">More then one but less than two years</option>
    <option value="more">More than two years</option>   
</select>
</p>
</div>

when the 'yes' radio button is selected the div with the id 'stateoptions' should be visible and when the 'no' radio button is pressed it should get hidden again. To achieve this below is my js attempt.

/* displays the contents when state gov ex-employee selected and removes it when not selected */
function stateGovOptions()
{
    if(document.getElementById('stategov').value == 'yes')
        document.getElementById('stateOptions').setAttribute('style','visibility:visible');
    else
        document.getElementById('stateOptions').setAttribute('style','visibility:hidden');
}

Pressing the yes button displays the required div, but pressing the no button also makes it visible, despite the 'else' block in the js function.

Please explain what am i missing out here.

• javascript
• css
• html

5 Answers 5

Your html is invalid because you've used the same id on multiple elements. Which in turn means that it doesn't really make sense to try to select those elements using document.getElementById(), since that method returns a single element (or null) - so how would it know which element you mean?

A minimal change to your existing code to get it to work would be to pass the value of the clicked item to your function:

<input type="radio" name="stateGov" value="yes" class="choice"
       onClick="stateGovOptions(this.value)"/>
<label>No</label>
<input type="radio" name="stateGov" value="no" class="choice"
       onClick="stateGovOptions(this.value)"/>

...and then use it like this:

function stateGovOptions(val)
{
    if(val == 'yes')
        document.getElementById('stateOptions').setAttribute('style','visibility:visible');
    else
        document.getElementById('stateOptions').setAttribute('style','visibility:hidden');
}

Demo: http://jsfiddle.net/ryxCM/

Note that normally one wouldn't overwrite the entire style attribute to set one property, one would set just the property in question:

document.getElementById('stateOptions').style.visibility = 'visible';

Demo: http://jsfiddle.net/ryxCM/1/

Do you even need JS for this?

Unwrapping the elements allows you to do this with pure CSS.

Codepen Example

CSS

#stategov1 ~ #stateOptions {
  visibility:hidden;
}

#stategov1:checked ~ #stateOptions {
  visibility:visible;
}

HTML

<form>For State govt. Ex- Employee
  <span class="small">Select if you are a state govt. ex-employee</span>

  <label>Yes</label>
  <input type="radio" name="stateGov" id="stategov1" value="yes" class="choice"/>
  <label>No</label>
  <input type="radio" name="stateGov" id="stategov2" value="no" class="choice"/>


  <!-- State govt. ex- employees  -->
  <div id="stateOptions">
    <label>
      <span class="small">Select </span>
    </label>

    <select title="stateGovExEmp" name="stateGovExEmp" id="fdivision">
      <option value="state_gov_lev_not_sel">--Select Level At Which Worked At State --</option>
      <option value="less">Less than or equal to one year</option>
      <option value="between">More then one but less than two years</option>
      <option value="more">More than two years</option>   
    </select>

  </div>
</form>

Then it's a matter of basic styling

Try this after removing the duplicate IDS

document.getElementById('stateOptions').style.visibility=document.getElementsByName('stategov')[0].checked?"visible":"hidden";

You may want to use display block/none to not have the div take up any space

Try this

function stateGovOptions(){
 if(document.getElementById('stategov').value =='yes')
   document.getElementById('stateOptions').setAttribute('style','visibility:visible');
 else        
   document.getElementById('stateOptions').setAttribute('style', 'display:none');
}

ById('stategovfunction stateGovOptions(){
    if(document.getElementById('stategov').value =='yes')
        document.getElementById('stateOptions').setAttribute('style','visibility:visible');
    else