message - show & hide

by Krzysztof Safjanowski

HTML

<div id="wrapper">
    <div>
        <label for="lorem">
            <input id="lorem" name="change" type="radio" />lorem
        </label>
        <div class="message">
            <input name="lorem-text" type="text" />
        </div>
    </div>
    <div>
        <label for="ipsum">
            <input id="ipsum" name="change" type="radio" />ipsum
        </label>
        <div class="message">
            message for ipsum
        </div>
    </div>
</div>

CSS

.message {display: none;}
#wrapper > div {overflow: hidden;}
#wrapper > div label {float: left; margin-right: 12px;}
#wrapper > div label input[type="radio"] {margin-right: 3px;}

JavaScript

$(function() {
    var $wrapper = $('#wrapper');
    var $messages = $('.message');

    $wrapper.delegate('input:radio', 'change', function() {
        $messages.hide();
        $(this).parent().next().show();
    });
});