Panel Slider

Slide a DIV open and closed with a dynamic height

HTML

<div id="myDiv">
    <p>This is a div with lots of content</p>
    <p>This is a div with lots of content</p>
    <p>This is a div with lots of content</p>
    <p>This is a div with lots of content</p>
    <p>This is a div with lots of content</p>
    <p>This is a div with lots of content</p>
    <p>This is a div with lots of content</p>
    <p>This is a div with lots of content</p>
    <p>This is a div with lots of content</p>
</div>

CSS

#myDiv { width: 20px; border: 1px solid red; overflow:hidden;  }

JavaScript

$('#myDiv').click(function() {
    $(this).toggleClass('expanded')
    var newHeight = $(this).hasClass('expanded')  ? $(this).prop('scrollHeight') : 20;
    $(this).animate({height:newHeight}, 500);                  
});