slide

Includes : slideUp , slideDown , slideToggle

by sum1

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<span id="showdiv">Slide Down</span>

<span id="hidediv">Slide Up</span>

<span id="togglediv">Slide Toggle</span>

<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<p>Animation complete</p>

CSS

div {
    display:none;
    margin:10px;
    background-color:royalblue;
    color:white;
    padding:10px;
    width:200px;
}
span {
    border:1px solid gray;
    padding:5px;
    background-color:yellow;
}
p {
    display:none;
    background-color:red;
    color:white;
    padding:20px;
    margin:10px;
    width:200px;
}

JavaScript

$("#showdiv").click(function () {
    $("div").slideDown("slow", function msg() {
        $("p").show("slow");
    });
});

$("#hidediv").click(function () {
    $("div").slideUp("slow", function msg() {
        $("p").hide("slow");
    });
});

$("#togglediv").click(function () {
    $("div").slideToggle("slow");
});