JSFiddle - React, Tailwind, and code Playground

by ninty9notout

HTML

<ul class="root">
    <li>
        <a href="#">2011</a>
        <ul class="sub">
            <li><a href="#">January</a></li>
            <li><a href="#">February</a></li>
            <li><a href="#">March</a></li>
            <li><a href="#">April</a></li>
            <li><a href="#">May</a></li>
            <li><a href="#">[...]</a></li>
        </ul>
    </li>
    <li>
        <a href="#">2010</a>
        <ul class="sub">
            <li><a href="#">January</a></li>
            <li><a href="#">February</a></li>
            <li><a href="#">March</a></li>
            <li><a href="#">April</a></li>
            <li><a href="#">May</a></li>
            <li><a href="#">[...]</a></li>
        </ul>
    </li>
    <li>
        <a href="#">2009</a>
        <ul class="sub">
            <li><a href="#">January</a></li>
            <li><a href="#">February</a></li>
            <li><a href="#">March</a></li>
            <li><a href="#">April</a></li>
            <li><a href="#">May</a></li>
            <li><a href="#">[...]</a></li>
        </ul>
    </li>
</ul>

CSS

.sub {
    display: none;
    margin-left: 10px;
}

JavaScript

$(document).ready(function() {
    $('.root > li > a').click(function() {
        var 
            allSubs = $('.sub'),
            nextSub = $(this).next();

        if(nextSub.is(":visible")) {
            nextSub.slideUp();
        } else {
            if(allSubs.is(":visible")) {
                allSubs.slideUp();
            }
            nextSub.slideDown();
        }
        return false;
    });
});