show/hide Form element using radio button

Question

Here is my code. If I click on From 's radio button, it will display 2 more options. If I click on To 's radio button, it will display 2 more options. But if I click on Full Day 's radio button, options From and To should disappear.

When I click on Full Day , only one option disappears. I want both to disappear. How can I do this?

 function show1() { document.getElementById('div1').style.display = 'none'; } function show2() { document.getElementById('div1').style.display = 'block'; } function show3() { document.getElementById('div2').style.display = 'block'; } 

 body { font-family: arial; } .hide { display: none; } p { font-weight: bold; } 

 <p>Leave</p> <input type="radio" name="tab" value="igotnone" onclick="show1();" /> Full Day <input type="radio" name="tab1" value="igottwo" onclick="show2();" /> From <input type="radio" name="tab2" value="igottwo" onclick="show3();" /> To <div id="div1" class="hide"> <hr> <p>From Which Half Session You Are Not Available???</p> <input type="radio" value="Yes" name="one"> First Session&nbsp; <input type="radio" value="Yes" name="one"> Second Session </div> <div id="div2" class="hide"> <hr> <p>To Which Half Session You Are Not Available???</p> <input type="radio" value="Yes" name="two"> First Session&nbsp; <input type="radio" value="Yes" name="two"> Second Session </div> 

Answer 1

You may wrap the two div s into one div and show/hide that only.

Moreover, radio buttons should share the same name to allow users to choose only one option at a time.

 function show1() { document.getElementById('divs').style.display = 'none'; } function show2() { document.getElementById('divs').style.display = 'block'; } function show3() { document.getElementById('divs').style.display = 'block'; } 

 body { font-family: arial; } .hide { display: none; } p { font-weight: bold; } 

 <p>Leave</p> <input type="radio" name="tab" value="igotnone" onclick="show1();" /> Full Day <input type="radio" name="tab" value="igottwo" onclick="show2();" /> From <input type="radio" name="tab" value="igottwo" onclick="show3();" /> To <div id="divs" class="hide"> <div id="div1"> <hr> <p>From Which Half Session You Are Not Available???</p> <input type="radio" value="Yes" name="one"> First Session&nbsp; <input type="radio" value="Yes" name="one"> Second Session </div> <div id="div2"> <hr> <p>To Which Half Session You Are Not Available???</p> <input type="radio" value="Yes" name="two"> First Session&nbsp; <input type="radio" value="Yes" name="two"> Second Session </div> </div> 

Answer 2

Firstly the name of all the radio button should be same. So, it can select one at a time. second the div you are displaying at the same time hide the other div.

 function show1() { document.getElementById('div1').style.display = 'none'; document.getElementById('div2').style.display = 'none'; } function show2() { document.getElementById('div2').style.display = 'none'; document.getElementById('div1').style.display = 'block'; } function show3() { document.getElementById('div1').style.display = 'none'; document.getElementById('div2').style.display = 'block'; } 

 body { font-family: arial; } .hide { display: none; } p { font-weight: bold; } 

 <p>Leave</p> <input type="radio" name="tab" value="igotnone" onclick="show1();" /> Full Day <input type="radio" name="tab" value="igottwo" onclick="show2();" /> From <input type="radio" name="tab" value="igottwo" onclick="show3();" /> To <div id="div1" class="hide"> <hr> <p>From Which Half Session You Are Not Available???</p> <input type="radio" value="Yes" name="one"> First Session&nbsp; <input type="radio" value="Yes" name="one"> Second Session </div> <div id="div2" class="hide"> <hr> <p>To Which Half Session You Are Not Available???</p> <input type="radio" value="Yes" name="two"> First Session&nbsp; <input type="radio" value="Yes" name="two"> Second Session </div>