Showing a <div> when a radio input is checked

Showing a <div> when a radio input is checked

by john_s

HTML

<div class="show-and-hide-wrapper">Group 1:<br />
    Show:
    <label><input type="radio" name="hide-show" value="green-content" />Green</label>
    <label><input type="radio" name="hide-show" value="red-content" />Red</label>
    <div class="show-and-hide-content green-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu ligula aliquam, faucibus lorem non, porttitor nulla. Duis pharetra sagittis urna malesuada imperdiet. Sed at leo et velit consectetur vulputate.</p>
    </div>
    <div class="show-and-hide-content red-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu ligula aliquam, faucibus lorem non, porttitor nulla. Duis pharetra sagittis urna malesuada imperdiet. Sed at leo et velit consectetur vulputate.</p>
    </div>
</div>
<br />
<div class="show-and-hide-wrapper">Group 2:<br />
    Show:
    <label><input type="radio" name="hide-show2" value="green-content" />Green</label>
    <label><input type="radio" name="hide-show2" value="red-content" />Red</label>
    <div class="show-and-hide-content green-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu ligula aliquam, faucibus lorem non, porttitor nulla. Duis pharetra sagittis urna malesuada imperdiet. Sed at leo et velit consectetur vulputate.</p>
    </div>
    <div class="show-and-hide-content red-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu ligula aliquam, faucibus lorem non, porttitor nulla. Duis pharetra sagittis urna malesuada imperdiet. Sed at leo et velit consectetur vulputate.</p>
    </div>
</div>

CSS

.show-and-hide-content {
    display: none;
}
.green-content {
    color: green;
}
.red-content {
    color: red;
}

JavaScript

$('.show-and-hide-wrapper').find(':radio').change(function () {
    var $radio = $(this),
        $wrapper = $radio.closest('.show-and-hide-wrapper'),
        $showContent = $wrapper.find('.' + $radio.val());
    $wrapper.find('.show-and-hide-content').not($showContent).hide('slideToggle');
    $showContent.show('slideToggle');
});