SlideDown/Up content

SlideDown/Up content

by Ed Allison

HTML

<div><a href="#" class="clickMe">Click Here</a><br />
<div class="clickEvent hide">
    <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>

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");
});