JSFiddle - React, Tailwind, and code Playground

by bldoron

HTML

<div id="outer">
    <div id="inner">
        <div class="group shownGroup" style="background: red;"><a href="#">X</a></div>
        <div class="group" style="background: blue; display: none;"><a href="#">Y</a></div>
        <div class="group" style="background: green; display: none;"><a href="#">Z</a></div>
    </div>
</div>

<button onclick="buttonClick()">Down</button>

<script type="text/javascript">
function buttonClick() {
    var sg = document.getElementsByClassName("shownGroup")[0];
    sg.className = sg.className.replace( /(?:^|\s)shownGroup(?!\S)/g , '' );
    sg.style.display = 'none';
    var ns = sg.nextSibling.nextSibling;
    ns.className += " shownGroup";
    ns.style.display = 'inline-block';
}
</script>

CSS

#outer {
    width: 300px;
    height: 182px;
    overflow: hidden;
//    background: black;
}
#inner { position: relative; }
.group { width: 300px; height: 182px; background: red;}