Question

I want to make a simple method to hide/show content when a user clicks a radio button. Rather than use ID’s over and over, I want to make a more universal selector using classes so I could re-apply it throughout my site.

I think I am not getting outside the parent div (.radio-show) to find .next .radio-show-content?

$('.radio-show input:radio').click(function() {
        $(this).closest('div').next().find('.radio-show-content').fadeToggle(250).toggleClass('hide'); 
});


<div class="radio-show" > 
<label class="radio span1">
    <input type="radio" name="project" value="option1" checked>
    Yes
</label>
<label class="radio span1">
    <input type="radio" name="project" value="option2">
    No
</label>
</div>

<hr />
<div class="radio-show-content"><!-- yes -->
    Show this if Yes
</div>
<div class="radio-show-content hide"><!-- no-->
    Show this if No
</div>

Answer 1

.next is getting the <hr>. There’s no need to go up the DOM tree, really. You can just use:

$(".radio-show-content").fadeToggle(250).toggleClass('hide')

However, this probably doesn’t do what you want in that it does not select a specific .radio-show-content. You can link based on radio button index (get with .index and get the -show-content with .eq), or just use CSS transitions with .hide and toggle it consistently.