Question

I need to create a form which has 2(Yes/NO) options and if the user clicks one of the option then he should get a collapsing subform with more specifics regarding to that particular selection. If he selects other option then he should get another collapsing subform with related info. I know that we have to use JavaScript or Jquery(to get the collapsing effect), but I am new to both. Any simple tutorials or info for beginners is greatly appreciated.

PS: I have seen many questions for this requirement but the fact is me being a beginner makes it tough to understand them.

Thanks,

Answer 1

Basically, you are going to need to wrap the two different subforms in divs and then use the jQuery .show() and .hide() functions to show and hide them when the right radio button is clicked.

Here is a useful tutorial on showing and hiding: http://papermashup.com/simple-jquery-showhide-div/

EDIT: More specific answer for user..

$(document).ready(function(){
   $("#check-box").click( function(){
     if( $(this).is(':checked')) {
         $('#div1').show();
     } else {
        $('#div1').hide();
     }
  });

});