SlideToggle

by Mostafa Zeinivand

HTML

<div id="main">
    <div id="slide_wrapper">
        <div id="head">Click Me!</div>
        <div id="body">
            Content ...
        </div>
    </div>
</div>

CSS

#main{
    position:relative;
    width:500px;
    background:#e7e7e7;
    margin:0 auto;
    padding:5px;
    border:solid 1px #CCC;
}
#head{
    position:relative;
    width:98%;
    padding:1%;
    height:32px;
    line-height:32px;
    background:#CCC;
    cursor:pointer;
}
#body{
    position:relative;
    width:98%;
    padding:1%;
    height:350px;
    background:#DDD;
    display:none;
}

JavaScript

$("#head").click(function(){
    $("#body").slideToggle("fast");
});