JSFiddle - React, Tailwind, and code Playground

by viliusl

HTML

<div class="top-to-bottom switch">
    <div class="child a"></div>
    <div class="child b"></div>
    <div class="child c"></div>
    <div class="child d"></div>
</div>

<button class="toggler">Toggle</button>

CSS

.top-to-bottom {
    position: absolute;
}

.child {
    width: 50px;
    height: 50px;
    -webkit-transition: .3s;
}

.switch .child {
    margin-top: -100px; /* height * 2 */
}

.switch .child:nth-child(1) {
    margin-top: 150px; /* height * ( num of childs -1 )  */
}

.a {
    background:blue;

}
.b {
    background:red;
}

.c {
    background:purple;
}

.d {
    background:green;
}


/*just for testing*/
.toggler {
    position: absolute;
    top: 300px;
    cursor: pointer;
}

JavaScript

/* just for testing */
var div = document.querySelector('.top-to-bottom'),
    toggler = document.querySelector('.toggler');

function toggleSwitch() {
    div.classList.toggle('switch');
}

toggler.addEventListener('click', toggleSwitch, false);