Reputation: 351
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.
<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
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.
});
});
Upvotes: 3