Show/Hide Navigation

Shows/Hides Navigation Text/Content on click.

HTML

<div id="movies">
    <h2>My Favorite Movies</h2>
    
    <h3>Pulp Fiction</h3>
    <div>
        <p>Lorem Ipsum!</p>    
    </div>
    
    <h3>The Lives of Others</h3>
    <div>
        <p>Lorem Ipsum!</p>    
    </div>
    
    <h3>Reservoir Dogs</h3>
    <div>
        <p>Lorem Ipsum!</p>    
    </div>
    
    <h3>Pan's Labyrinth</h3>
    <div>
        <p>Lorem Ipsum!</p>    
    </div>
    
    <h3>Drag Me to Hell</h3>
    <div>
        <p>Lorem Ipsum!</p>    
    </div>
</div>

CSS

#movies {
    background: #69F;
    width: 300px;
    font-family: Verdana, Geneva, sans-serif;
}

#movies h2 {
    background: #039;
    color: #FFF;
    font-size: 16px;
    padding: 10px;
    margin: 0;
}

#movies h3 {
    font-size: 15px;
    background: #C00;
    color: #FFF;
    padding: 10px;
    margin: 0;
    cursor: pointer;
}

#movies p {
    font-size: 12px;
    padding: 10px;
}

JavaScript

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