How To Show And Hide Input Fields Based On Radio Button Selection

Question

Here is the code to show input fields depending on radio selection like:

SCRIPT

<script type="text/javascript">  function yesnoCheck() {     if (document.getElementById('yesCheck').checked) {         document.getElementById('ifYes').style.visibility = 'visible';     } else {         document.getElementById('ifYes').style.visibility = 'hidden';     }  </script> 

HTML

Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"/>No <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"/> <br> <div id="ifYes" style="visibility:hidden">If yes, explain:     <input type='text' id='yes' name='yes'/>     <br>What can we do to accommodate you?         <input type='text' id='acc' name='acc'/> </div>    other 3 <input type='text' id='other3' name='other3'> <br>     other 4 <input type='text' id='other4' name='other4'> <br> 

However I would like input fields to be hidden (like on the image), and make they do not use any space until radio button is selected, when radio is selected show them with fade effect...

Here is the fiddle:

Answer 1

Replace all instances of visibility style to display

display:none //to hide display:block //to show 

Here's updated jsfiddle: http://jsfiddle.net/QAaHP/16/

You can do it using Mootools or jQuery functions to slide up/down but if you don't need animation effect it's probably too much for what you need.

CSS display is a faster and simpler approach.