Showing and hiding content when 'multiple options' is selected

Showing and hiding content when 'multiple options' is selected

by labanino

HTML

<form id="fruits" action="/" method="post" name="fruits">
    <select>
        <option id="orange-group" type="radio" name="fruit-group" value="orange">Orange</option>
        <option id="apple-group" type="radio" name="fruit-group" value="apple">Apple</option>
        <option id="banana-group" type="radio" name="fruit-group" value="banana">Banana</option>
    </select>
</form>
<div id="default">I'll be gone when anything is selected!</div>
<div id="orange">This is my Orange!</div>
<div id="apple">This is my Apple!</div>
<div id="banana">This is my Banana!</div>

CSS

#orange, #apple, #banana {
    display:none;
}

JavaScript

var selected = false;

$('#fruits').click(function () {
    if (selected) {
        // Hide all
        $('#default,#orange,#apple,#banana').hide();

        // Show checked
        if ($('#orange-group').prop('selected')) {
            $('#orange').show();
        } else if ($('#apple-group').prop('selected')) {
            $('#apple').show();
        } else if ($('#banana-group').prop('selected')) {
            $('#banana').show();
        }
    }
    selected = true;
});