JSFiddle - React, Tailwind, and code Playground

HTML

<p><a class="rock" href="#">ROCK</a> / <a class="blues" href="#">BLUES</a></p>

                    <section class="container">
                    <div class="leftcolumn">
                        <ul class="rock" >
                            <li><a href="#">AUTOHAZE</a></li>
                            <li>BASSHOLES</li>
                            <li>BEAT ANGELS</li>
                            <li>BONFIRE MADIGAN </li>
                            <li>BOOM</li>       
                        </ul>

                        <ul class="blues">
                            <li>20 MILES    </li>
                            <li>AARON MOORE </li>
                            <li>ALBERT AMMONS   </li>
                            <li>ARON BURTON </li>
                            <li>ARTHUR CRUDUP   </li>
                        </ul>
                    </div>
                    </section>

CSS

ul {

    display:none;
 
}

JavaScript

$(function () {
    $('a').bind('click',function () {
        var Class = $(this).attr('class');

        var ulName = 'ul.' + Class;
        var Display=$(ulName).css('display');
        var Dis = $(ulName).css('display');
       
        $(ulName).siblings().hide();
        if (Dis == "block" || Dis == "undefined") {
            $(ulName).slideUp();
        }
        else {
            $(ulName).slideDown().show(1);
        }

    })
});