JSFiddle - React, Tailwind, and code Playground

by niki4810

HTML

<div class="container 0">
    <div class="first-child">
        <h1>1</h1> 
    </div>
    <div class="next-child first">
       <h1>2</h1> 
    </div>
    <div class="next-child second">
       <h1>3</h1> 
    </div>
</div>

<p></p>

CSS

body {
    margin:20px;
}
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
h1{
    text-align:center
}
.container {
    position:relative;
    min-width:450px;
}

.container > div {
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.first-child {
    position:relative;
    z-index:3;
    border:1px solid #d8d8d8;
    height:100px;
    width:100%;
    background-color : #fff;
    padding:5px;
}
.toggle-btn{
   position:absolute;
    cursor:pointer;
    bottom:5px;
    right:5px; 
    z-index : 4;
}
.toggle-btn {
    content:"";
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0 12px 12px;
    border-color: transparent transparent #CCC transparent;
}
.next-child {
    position:absolute;
    border:1px solid #d8d8d8;
    height:100px;
    background-color:#fff;
    transition: margin-top 0.2s ease;
    -webkit-transition: margin-top 0.3s ease;
}
.next-child.first {
    width: 100%;
    margin: 0 5px 0 5px;
    top: 4px;
    z-index: 2;
    left: 0;
}
.next-child.second {
    width: 100%;
    margin: 0 5px 0 5px;
    top: 8px;
    z-index: 1;
    left: 5px;
}
div.next-child.expanded {
    width: 100%;
    margin: 0;
    top: 0;
    left: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    transition: margin-top 0.3s, border-top 0.3s ease;
    -webkit-transition: margin-top 0.3s, border-top 0.3s ease;
}
div.first-child.expanded {
    -webkit-box-shadow: none;
    box-shadow: none;
    transition:  box-shadow 0.2s ease;
    -webkit-transition:  box-shadow 0.2s ease;
}
div.next-child.expanded.first {
    margin-top: 100px;
    border-top:0;
}
div.next-child.expanded.second {
    margin-top: 200px;
    border-top:0;
}

JavaScript

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