JSFiddle - React, Tailwind, and code Playground

by Alexander Startsev

HTML

<ul class="buttons">
    <li><button>First</button></li>
    <li><button>Second</button></li>
    <li class="sub">
        <button>Third</button>
        <ul class="sub-buttons">
            <li><button>Sub-button</button></li>
            <li><button>Sub-button 2</button></li>
            <li><button>Sub-button 3</button></li>
        </ul>
    </li>
    <li><button>Fourth</button></li>
</ul>
<div class="layers">
    <div class="active">One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Sub-button 1</div>
    <div>Sub-button 2</div>
    <div>Sub-button 3</div>
</div>

CSS

*{
    margin: 0;
    padding: 0;
}

body{
    margin: 10px;
}

.buttons{
    margin-bottom: 10px;
}

.buttons>li{
    list-style: none;
    display: inline;
    margin-right: 10px;
}

.sub{
    position: relative;
}

.sub-buttons{
    display: none;
    position: absolute;
    padding-top: 10px;
    min-width: 100px;
    list-style: none;
}

    .sub-buttons li+li{
        margin-top: 5px;
    }

.sub:hover .sub-buttons{
    display: block;
}

button{
    padding: 5px;
}

.layers div{
    display: none;
    background: #00F;
    color: #FFF;
    padding: 10px;
    font: 14px/20px normal Arial, sans-serif;
}

.layers .active{
    display: block;
}

JavaScript

$(function(){
    
    function slidesChanging(number, call){
        var layerIndex = $(call).parents("li").index() + number;
        if(!($(".layers div:eq("+layerIndex+")").hasClass("active"))){
            $(".layers .active").slideToggle(100, function(){
                $(this).removeClass("active");
                $(".layers div:eq("+layerIndex+")")
                .slideToggle(100)
                .addClass("active");
            });    
        }
    }
    $(".buttons>li>button").on("click", function(){
        slidesChanging(0, $(this));
    });
    
    $(".sub-buttons button").on("click", function(){
        slidesChanging(4, $(this));
    });
})