JSFiddle - React, Tailwind, and code Playground

by lbstr

HTML

<nav>
    <ul>
        <li class="header">Menu 1</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>
    <ul>
        <li class="header">Menu 2</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>
    <ul>
        <li class="header">Menu 3</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>
</nav>

CSS

nav ul li { display: none; }
nav ul li.header { display: block; cursor: pointer; }

JavaScript

$(function(){
        $('ul .header').toggle(function(){
            $(this).siblings('li').show();
        },
        function(){
            $(this).siblings('li').hide();
        });
    });