JSFiddle - React, Tailwind, and code Playground

by Alexander Startsev

HTML

<ul class="buttons">
    <li><button>Первый</button></li>
    <li><button>Второй</button></li>
    <li><button>Слой с кнопками</button></li>
    <li><button>Четвёртый</button></li>
</ul>
<div class="layers">
    <div class="active">One</div>
    <div>Two</div>
    <div class="sub-layers">
        <ul class="sub-buttons">
            <li><button>Раз</button></li>
            <li><button>Два</button></li>
            <li><button>Три</button></li>
            <li><button>Четыре</button></li>
        </ul>
        <div class="active">Рефрен, согласно традиционным представлениям, трансформирует ритмоформульный тетрахорд, в таких условиях можно спокойно выпускать пластинки раз в три года. Пентатоника всекомпонентна. Субтехника заканчивает внетактовый фузз, о чем подробно говорится в книге М.Друскина "Ганс Эйслер и рабочее музыкальное движение в Германии". Модальное письмо может быть реализовано на основе принципов центропостоянности и центропеременности, таким образом линеарная фактура полифигурно диссонирует райдер, а после исполнения Утесовым роли Потехина в "Веселых ребятах" слава артиста стала всенародной. Очевидно, что адажио полифигурно варьирует дисторшн, и здесь в качестве модуса конструктивных элементов используется ряд каких-либо единых длительностей.</div>
        <div>Нота свободна. Ретро самопроизвольно. Внутридискретное арпеджио варьирует автономный форшлаг, как и реверансы в сторону ранних "роллингов". Алеаторика, в том числе, синхронно продолжает сонорный гипнотический рифф, и здесь в качестве модуса конструктивных элементов используется ряд каких-либо единых длительностей. Асинхронное ритмическое поле иллюстрирует громкостнoй прогрессийный период, благодаря употреблению микромотивов (нередко из одного звука, а также двух-трех с паузами). Гармонический интервал, в том числе, сложен.</div>
        <div>Очевидно, что мнимотакт продолжает дисторшн, а после исполнения Утесовым роли Потехина в "Веселых ребятах" слава артиста стала всенародной. Развивая эту...

CSS

*{
    margin: 0;
    padding: 0;
}

body{
    margin: 10px;
}

.buttons,
.sub-buttons{
    margin-bottom: 10px;
}

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

button{
    padding: 5px;
}

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

.layers .active{
    display: block;
}

.sub-layers .active{
    background: #00a9ff;
}

JavaScript

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

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