showhidewithanimation

by sum1

HTML

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

<span id="hidediv">hide</span>

<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>

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

JavaScript

$("#showdiv").click(function () {
    $("div").first().show("fast", function shownext() {
        $(this).next("div").show("fast", shownext);
    });
});

$("#hidediv").click(function () {
    $("div").first().hide("slow", function hidenext() {
        $(this).next("div").hide("slow", hidenext);
    });
});