jquery to display different content based on radio selection

I have the following radio buttons:

 

I have a hidden div with a class="options2" that has display:none set. If a user selects option 2, I would like to change it to be changed to display:block.  

What is the best way to accomplish this?
<div class="input-fields-rfq">
	<label>Option 1</label><br />
	<div><input class="end_user" type="radio" name="end_user" value="1" style="width:30px;"></div>
</div>

<div class="input-fields-rfq">
	<label>Option 2</label><br />
	<div><input class="end_user" type="radio" name="end_user" value="2" style="width:30px;"></div>
</div>

<div class="input-fields-rfq">
	<label>Option 3</label><br />
	<div><input class="end_user" type="radio" name="end_user" value="3" style="width:30px;"></div>
</div>

Open in new window

LVL 1
befidledAsked:
Who is Participating?
 
Gurvinder Pal SinghConnect With a Mentor Commented:
$("input[name='end_user']").click(function(){
   if ( $(this).val() == "1" )
   {
      $(".options1").show();
   }
   if ( $(this).val() == "2" )
   {
      $(".options2").show();
   }
   if ( $(this).val() == "3" )
   {
      $(".options3").show();
   }
});
0
 
Gurvinder Pal SinghCommented:
or
//this is going to hide the previous option and show the new one
 $("input[name='end_user']").click(function(){
   $(".options1").hide();
   $(".options2").hide();
   $(".options3").hide();
   var value =  $(this).val();
   $(".options" + value ).show();
});

0
 
befidledAuthor Commented:
Perfect. Thanks for the quick response!

brian
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.