simple dropdown animation

very simple animation using jquery to hide and show sub-sections

by beej

HTML

<div id="bio">
 <h2>Who’s Hot Right Now?</h2>
 <h3>Beau Dandy</h3>
 <div>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet eros neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ligula neque, elementum tristique leo. Cras sapien eros, eleifend a viverra at, dapibus vitae libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed condimentum purus non arcu porta dictum. Pellentesque elementum, massa a iaculis laoreet, odio ipsum tincidunt tortor, quis tempor massa libero sed neque. Suspendisse laoreet gravida dapibus. Nam laoreet vestibulum libero, id cursus eros consequat dapibus. Curabitur massa tortor, imperdiet eu elementum nec, vulputate pharetra ipsum. Aliquam erat volutpat. Ut sollicitudin lacus ut turpis pulvinar cursus. Nulla tristique, justo vitae consequat sollicitudin, lorem erat semper sem, auctor rhoncus mauris arcu imperdiet nisl. Phasellus eleifend euismod laoreet. Praesent convallis massa in risus mollis a ultricies tellus volutpat. Integer elementum iaculis libero ut facilisis.</p>
 </div>
 <h3>Johnny Stardust</h3>
 <div>
 <p>Nam sapien tellus, commodo eget lacinia quis, ornare ut lacus. Quisque ultricies erat sed erat venenatis suscipit. Mauris ut felis risus, sed tempor augue. Proin convallis laoreet mi vitae cursus. Donec tempus eros sit amet eros cursus vel gravida eros posuere. Suspendisse ultricies diam ut dolor blandit ullamcorper. Vivamus eu ante diam, a pulvinar quam. Vivamus condimentum tellus a augue facilisis aliquet non in eros. Praesent nec lorem tortor. Morbi bibendum elit vitae ipsum mollis vestibulum. Donec pulvinar semper quam sit amet pellentesque. Cras diam sem, tempor malesuada porta quis, dapibus quis mi. Quisque id lacus id ligula dignissim tincidunt. Maecenas dictum lacus semper arcu adipiscing venenatis. Donec est ante, luctus eu fringilla a, lobortis accumsan massa.

</p>
 </div>
 <h3>Glendatronix</h3>
 <div>
 <p>Fusce tincidunt sem...

CSS

body {
    color: #555555;
}

h2 {
    font-size: 1.5em;
}
h3 {
    font-size: 1.25em;
    background: #36BBCE;
}
p {
    background: #5FC0CE;
    padding-left: 10px;
}

JavaScript

$('#bio > div').hide();
$('#bio > div:first').show();
$('#bio h3').click(function() {
    $(this).next().animate({
        'height': 'toggle'
    }, 'slow', 'easeOutBounce');
});