JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<div id="menu">
    <div style="background-color: green;">
        	<h1>first page</h1>
    </div>
    <div style="background-color: green;">
        	<h1>second page</h1>

    </div>
    <div>
        	<h1>third page</h1>

    </div>
    <div>
        	<h1>fourth page</h1>

    </div>
    <div>
        	<h1>fifth page</h1>

    </div>
    <div>
        	<h1>sixth page</h1>

    </div>
</div>
<div id="footer">
    <ul class="nav">
        <li><a href="#">Link 1</a>

        </li>
        <li><a href="#">Link 2</a>

        </li>
        <li><a href="#">Link 3</a>

        </li>
        <li><a href="#">Link 4</a>

        </li>
        <li><a href="#">Link 5</a>

        </li>
        <li><a href="#">Link 6</a>

        </li>
    </ul>
</div>

CSS

#menu {
    width: 600px;
    height: 600px;
}

#menu > div {
    
    height: 500px;
    width: 500px;
}

JavaScript

$(document).ready(function () {
        $("#menu > div").not(":eq(0)").hide();
        $("#footer > .nav > li").click(function (e) {
            var index = $(e.target).parent().index()
            var $divs = $("#menu div")
            $divs.not(":eq(" + index + ")").hide();
            $divs.eq(index).show("explode", {
                pieces: 9
            }, 20000);
        });
    });