CODEWITHSUNDEEP
javascriptjqueryhtml
Amidude
Amidude

Reputation: 351

hide divs when selecting new rado button using toggle

When I click on a radio button, if it's the last one in the list, it shows all of the hidden divs and doesn't close all open divs when I select another radio button. I know I'm close...but missing something.

    $(document).ready(function() {
      $('input').on('change',function(){
      $(".groupNumber").hide().filter(":lt(" + this.value + ")").slideToggle("slow");
      });
    });

I thought I was taking care of it by having the "hide" at the beginning of the chain.

Html

<table cellpadding="0" cellspacing="0">
<tr>
<td width="25"><input type="radio" name="rNumber" value="1"></td>
<td width="25"><input type="radio" name="rNumber" value="2"></td>
<td width="25"><input type="radio" name="rNumber" value="3"></td>
</tr>
</table>

The divs are as follows:

<div id="grp1" class="groupNumber">Content Here</div>
<div id="grp2" class="groupNumber">Content Here</div>
<div id="grp3" class="groupNumber">Content Here</div>

What I want is the div for the corresponding radiobutton to be visible and to close any others that may be open.

Upvotes: 0

Views: 71

Answers (1)

PSL
PSL

Reputation: 123749

That is because yo are using lt, you should use eq instead. try this.

using lt you are getting all the divs less that the index value to be shown so it is displaying that one and all previous ones. instead just use eq to get the div to be shown from the collection.

$(document).ready(function() {
      $('input').on('change',function(){
       $(".groupNumber").hide().eq((+this.value -1)).slideToggle("slow");//Probably Slide toggle probably doesn't make sense here as change event won't be triggered if you select the same option again.
      });
    });

Fiddle

Upvotes: 3

Related Questions