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>AUTOHAZE</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').click(function () {
        var Class = $(this).attr('class');
        var ulName = 'ul.' + Class;
        $(ulName).hide();
        $(ulName).slideDown();
    });
});