jQuery to show/hide content with radio buttons

by Akram kamal

HTML

<div id="myContent">
    <p>Select an option to dipslay your content:</p><br />
<input type="radio" value="types" class="syncTypes" name="syncTypes"> Show Contacts<br>
<input type="radio" value="groups" class="syncTypes" name="syncTypes"> Show Groups
            
<div id="contacts" style="display:none;border:1px #666 solid;padding:3px;top:15px;position:relative">     
    Contacts
</div>

<div id="groups" style="display:none;border:1px #666 solid;padding:3px;top:15px;position:relative">     
    Groups
</div>
</div>

CSS

body {
    font-family:Calibri;
    font-size:12pt;
    padding:10px;
}

p {
    font-weight:bold;        
}

JavaScript

$(function() {
    $types = $('.syncTypes');
    $contacts = $('#contacts');
    $groups = $('#groups');
    $types.change(function() {
        $this = $(this).val();
        if ($this == "types") {
            $groups.slideUp(200);
            $contacts.delay(200).slideDown(200);
        }
        else if ($this == "groups") {
            $contacts.slideUp(200);
            $groups.delay(200).slideDown(200);
        }
    });
});