Showing a <div> when a radio input is checked

Showing a <div> when a radio input is checked

HTML

<div class="show-and-hide-content">
    <label>If 'No' is checked show green text</label>
    <label>
        <input type="radio" name="green-text" id="select-yes" value="option1">Yes</label>
    <label>
        <input type="radio" name="green-text" id="select-no" value="option2">No</label>
    <div class="show-and-hide-true">
        <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-true, .show-and-hide-false {
    display:none;
}
.show-and-hide-true {
    color:green;
}
.show-and-hide-false {
    color:red;
}

JavaScript

$('.show-and-hide-content').click(function () {
    // Hide all
    $('.show-and-hide-true').hide('slideToggle');

    // Show checked
    if ($('#select-no').prop('checked')) {
        $('.show-and-hide-true').show();
    }
});