Reversed slideUp/slideDown

by Bianca Kuehweidner

HTML

<button id="hide-slide-up">Hide (slideUp)</button>
<button id="show-slide-down">Show (slideDown)</button>
<br/>
<br/>
<button id="hide-animate-up">Hide (animate)</button>
<button id="show-animate-down">Show (animate)</button>
<br />
<br/>
<button id="hide-animate-down">Hide (reverse)</button>
<button id="show-animate-up">Show (reverse)</button>
<br />
<br />
<div>Hello, world!</div>
<p>
Lorem ipsum
</p>

CSS

div {
    background-color: green;
    color: white;
}

JavaScript

// Using slideUp/slideDown
$("#hide-slide-up").on("click", function () {
    $("div").slideUp(500);
});

$("#show-slide-down").on("click", function () {
    $("div").slideDown(500);
});

// Using animate
$("#hide-animate-up").on("click", function () {
    $("div").css({
        overflow: "hidden"
    }).animate({
        height: 0
    }, 500, function () {
        $(this).css({
            display: "none",
            overflow: "",
            height: ""
        });
    });
});

$("#show-animate-down").on("click", function () {
    var div = $("div:not(:visible)");
    
    var height = div.css({
        display: "block"
    }).height();
    
    div.css({
        overflow: "hidden",
        height: 0
    }).animate({
        height: height
    }, 500, function () {
        $(this).css({
            display: "",
            overflow: "",
            height: ""
        });
    });
});

// Reverse
$("#hide-animate-down").on("click", function () {
    var div = $("div");
    
    var height = div.height();
    
    div.css({
        overflow: "hidden",
        marginTop: 0,
        height: height
    }).animate({
        marginTop: height,
        height: 0
    }, 500, function () {
        $(this).css({
            display: "none",
            overflow: "",
            height: "",
            marginTop: ""
        });
    });
});

$("#show-animate-up").on("click", function () {
    var div = $("div:not(:visible)");
    
    var height = div.css({
        display: "block"
    }).height();
    
    div.css({
        overflow: "hidden",
        marginTop: height,
        height: 0
    }).animate({
        marginTop: 0,
        height: height
    }, 500, function () {
        $(this).css({
            display: "",
            overflow: "",
            height: "",
            marginTop: ""
        });
    });
});