Stacky

by niki4810

HTML

<div class="1 stacky stacky-collapsed">
    <div class="stacky-child">
         <h1>1</h1>
 </div>
    <div class="stacky-child">
         <h1>2</h1>

    </div>
    <div class="stacky-child">
         <h1>3</h1>
    </div>
</div>

<div class="2 stacky stacky-collapsed">
    <div class="stacky-child">
         <h1>1</h1>
 </div>
    <div class="stacky-child">
         <h1>2</h1>

    </div>
    <div class="stacky-child">
         <h1>3</h1>
    </div>
</div>

CSS

body {
    margin:20px;
}
h1 {
    text-align:center;
}
.stacky {
    position:relative;
    min-width: 450px;
}
.stacky-child {
    position:relative;
    width:100%;
    height:100px;
    border:1px solid #d8d8d8;
    background-color : #fff;
    -webkit-transition: -webkit-transform 0.3s ease-in; /* Changed here */ 
     -moz-transition: -moz-transform 0.3s ease-in;
       -o-transition: -o-transform 0.3s ease-in;
          transition: transform 0.3s ease-in;
}

.stacky-child .stacky-toggle-btn{
    display : none;
}
.stacky-child:hover .stacky-toggle-btn{
    display : block;
}

.stacky .stacky-child:nth-child(1){
    z-index:3;    
}
.stacky .stacky-child:nth-child(2){
    z-index:2;
}

.stacky .stacky-child:nth-child(1n + 3){
    z-index:1;
}

.stacky.stacky-collapsed .stacky-child:nth-child(2){
   transform : translate(5px,-97px);
    -ms-transform: translate(5px,-97px); /* IE 9 */
   -webkit-transform: translate(5px,-97px); /* Safari and Chrome */
}
.stacky.stacky-collapsed .stacky-child:nth-child(1n + 3){
    transform : translate(10px,-194px);
    -ms-transform: translate(10px,-194px); /* IE 9 */
   -webkit-transform: translate(10px,-194px); /* Safari and Chrome */
}


/*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 #CCC transparent;
}

JavaScript

$.fn.stacky = function () {
    var container = this;
    container.addClass("stacky-collapsed");
    container.find(".stacky-child").eq(0).append('<div class="stacky-toggle-btn"></div>');
    container.on("click", ".stacky-toggle-btn", function (e) {
        container.toggleClass("stacky-collapsed");
    });
};

$(".1").stacky();
$(".2").stacky();