How to use jQuery to show/hide divs based on radio button selection?

Question

I have some radio buttons and I\'d like to have different hidden divs show up based on which radio button is selected. Here\'s what the HTML looks like:

<         


        

Answer 1

The simple jquery source for the same -

$("input:radio[name='group1']").click(function() {      
    $('.desc').hide();
    $('#' + $("input:radio[name='group1']:checked").val()).show();
});

In order to make it little more appropriate just add checked to first option --

opt1
  

remove .desc class from styling and modify divs like --

lorem ipsum dolor
consectetur adipisicing
sed do eiusmod tempor

it will really look good any-ways.