SlideDown/Up content

SlideDown/Up content

HTML

<div><a href="#" class="clickMe">Click Here</a><br />
<div class="hide"><div>
        <div class="clickEvent">
        <div class="box"></div>
        <p>aaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa<br />bbbbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbbbbbbb bbbbbbbbbbbb bbbbbbbbb<br />ccccccccccccccccc cccccccccccccccc cccccccccccccc ccccccccccccc<br />dddddddddddd ddddddddddd dddddddddddddddd dddddddddd
        </p>
    </div>    
</div></div>
</div>

CSS

.hide  { display:none; }
.clickEvent { 
    background-color:#EEE; padding:20px; 
    width: 200px;
    margin: auto;
}
.box {
    width: 50px;
    height: 100px;
    background-color: blue;
    position: relative;
    left: -35px;
}

JavaScript

$('.clickMe').toggle(function() {
    $(this).parent().find("div:eq(0)").slideDown(1000);
}, function() {
    $(this).parent().find("div:eq(0)").slideUp("fast");
});