JSFiddle - React, Tailwind, and code Playground

by 1eddy87

HTML

<div class="navigation">
    <ul>
        <li>
             <h1>One</h1>

            <ul>
                <li><a href="http://www.google.com">Google</a>

                </li>
                <li><a href="http://www.google.com">Google</a>

                </li>
            </ul>
        </li>
        <li>
             <h1>Two</h1>

            <ul>
                <li><a href="http://www.google.com">Google</a>

                </li>
                <li><a href="http://www.google.com">Google</a>

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

CSS

.navigation ul ul {
    display: none;
}
.navigation ul li {
    cursor: pointer;
    list-style-type: none;
}

JavaScript

jQuery(document).ready(function () {
    jQuery('h1').click(function () {
        $(this).closest('li').siblings().find('ul').slideUp();
        $(this).siblings('ul').slideToggle("fast");
    });
});