Stacky-Jquery

by niki4810

HTML

<button id="btnOpen">Open</button>
<button id="btnClose">Collapse</button>
<button id="btnToggle">Toggle</button>
<p></p>
<div class="1">
    <div>
         <h1>1</h1>

    </div>
    <div>
         <h1>2</h1>

    </div>
    <div>
         <h1>3</h1>

    </div>
    <div>
         <h1>4</h1>

        <div></div>
    </div>
</div>

CSS

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    margin:20px;
}
h1 {
    text-align:center;
}
.stacky {
    position:relative;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
.stacky-child {
    position:relative;
    border:1px solid #d8d8d8;
    width:100%;
    height:100px;
    background-color:#fff;
    -webkit-transition: margin 0.3s ease-in;
    -moz-transition: margin 0.3s ease-in;
    -o-transition: margin 0.3s ease-in;
    transition: margin 0.3s ease-in;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
.stacky.stacky-collapsed .stacky-child {
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.stacky-child:nth-child(1) {
    z-index : 3;
}
.stacky-child:nth-child(2) {
    z-index : 2;
}
.stacky-child:nth-child(n+3) {
    z-index : 1;
}
.stacky-collapsed .stacky-child:nth-child(2) {
    /*     margin-top: -98px;
    margin-left: 3px; */
    margin-top: -100px;
    margin-left: 2px;
    padding-bottom: 2px;
}
.stacky-collapsed .stacky-child:nth-child(n+3) {
    /*     margin-top: -100px;
    margin-left: 6px; */
    margin-top: -101px;
    margin-left: 4px;
    padding-bottom: 3px;
}
.stacky-collapsed .stacky-child:nth-child(n+4) {
    display:none;
}
/*stacky toggle btn css*/
 .stacky-toggle-btn {
    position:absolute;
    cursor:pointer;
    right:0;
    bottom:0;
    content:"";
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0 12px 12px;
    border-color: transparent transparent rgba(0, 0, 0, 0.5) transparent;
}

JavaScript

$.fn.stacky = function (options) {
    var container = this;
    var defaults = {
        "showToggleButton": true
    };

    $.extend(defaults, options);
    if (defaults.hasOwnProperty("width")) {
        container.width(defaults.width);
    }
    //add stacky class to parent
    container.addClass("stacky stacky-collapsed");
    //add stacky-child class to direct children
    container.children().addClass("stacky-child");

    if (defaults.showToggleButton) {
        //find the first child and append stacky toggle button
        container.find(".stacky-child").eq(0).append('<div class="stacky-toggle-btn"></div>');
    }


    var toggleStacky = function (e) {
        container.toggleClass("stacky-collapsed");
    }
    var openStacky = function (e) {
        container.removeClass("stacky-collapsed");
    }
    var closeStacky = function (e) {
        container.addClass("stacky-collapsed");
    }

    //event listeners
    container.on("click", ".stacky-toggle-btn", toggleStacky);
    container.on("openStacky", openStacky);
    container.on("collapseStacky", closeStacky);
    container.on("toggleStacky", toggleStacky);
};

$(".1").stacky({
    width: 100,
    showToggleButton : false
});
$("#btnOpen").click(function () {
    $(".1").trigger("openStacky");
});
$("#btnClose").click(function () {
    $(".1").trigger("collapseStacky");
});
$("#btnToggle").click(function () {
    $(".1").trigger("toggleStacky");
});