I am trying to toggle a content DIV base on the selection of radio buttons.

HTML for radio button.

<div class="row-fluid">
    <label class="radio">
      <input type="radio" name="account" id="yes" value="yes" checked>
      Yes, I have an existing account
    </label>
    <label class="radio">
      <input type="radio" name="account" id="no" value="no">
      No, I don't have an account
    </label>
</div>

Content DIV

<div id="account_contents">
    <p>This is account contents.......</p>  
</div>

This is how I tried it in jquery.

$('#no').bind('change',function(){
  $('#account_contents').fadeToggle(!$(this).is(':checked'));
  $('#account_contents').find("input").val("");
  $('#account_contents').find('select option:first').prop('selected',true);
});

But it doesn't work for me correctly. Here I want to show this content DIV only if user don't have an account.

Can anybody tell me how to fix this problem?

I am trying to toggle a content DIV base on the selection of radio buttons.

HTML for radio button.

<div class="row-fluid">
    <label class="radio">
      <input type="radio" name="account" id="yes" value="yes" checked>
      Yes, I have an existing account
    </label>
    <label class="radio">
      <input type="radio" name="account" id="no" value="no">
      No, I don't have an account
    </label>
</div>

Content DIV

<div id="account_contents">
    <p>This is account contents.......</p>  
</div>

This is how I tried it in jquery.

$('#no').bind('change',function(){
  $('#account_contents').fadeToggle(!$(this).is(':checked'));
  $('#account_contents').find("input").val("");
  $('#account_contents').find('select option:first').prop('selected',true);
});

But it doesn't work for me correctly. Here I want to show this content DIV only if user don't have an account.

Can anybody tell me how to fix this problem?

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Dec 26, 2015 at 10:33 AwkwardCoder 25.7k2929 gold badges8686 silver badges160160 bronze badges asked Dec 26, 2015 at 8:45 user3733831user3733831 2,9461010 gold badges3939 silver badges7373 bronze badges 2

• I ran the code and it works well for me. account_contents fades in when you click "No". Did you include jquery? – Cedric Ipkiss Commented Dec 26, 2015 at 8:57
• Yes, but, to toggle out I want to click again on #no. This is not the way I need, It should be toggle out when click on #yes. – user3733831 Commented Dec 26, 2015 at 9:02

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

seems you need .on('change') for radio buttons not just for one of them

$('input[type="radio"][name="account"]').on('change',function(){
  var ThisIt = $(this);
  if(ThisIt.val() == "yes"){
       // when user select yes
       $('#account_contents').fadeOut();
  }else{
       // when user select no
       $('#account_contents').fadeIn();
       $('#account_contents').find("input").val("");
       $('#account_contents').find('select option:first').prop('selected',true);
  }
});

Working Example

  $(document).ready(function(){
            $('.radio input[type="radio"]').on("click", function(){
            if($('.radio input[type="radio"]:checked').val() === "yes"){
                $("#account_contents").slideDown("slow");
            }else{
                $("#account_contents").slideUp("slow");
            }
          });
     });

I'm not sure if I got you right, but this fiddle toggles #account_contents depending on which button you click:

This was how i tweaked the script:

  $('#no').bind('change',function(){
  $('#account_contents').fadeToggle(!$(this).is(':checked'));
  $('#account_contents').find("input").val("");
  $('#account_contents').find('select option:first').prop('selected',true);
});
$("#yes").bind("change", function() {
  $('#account_contents').fadeOut();
});