JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        
    </head>
    
    <body>
        <div class="container">
            <h2>music</h2>
            <ul>
                <li>foo</li>
                <li>bar</li>
            </ul>
            <ul class="hidden">
                <li>hid</li>
                <li>den</li>
            </ul>
            
            <a href="#" class="showMore">show more</a>
        </div>
        
        <div class="container">
            <h2>movies</h2>
            <ul>
                <li>foo</li>
                <li>bar</li>
            </ul>
            <ul class="hidden">
                <li>hid</li>
                <li>den</li>
            </ul>
            
            <a href="#" class="showMore">show more</a>
        </div>
        
        <div class="container">
            <h2>games</h2>
            <ul>
                <li>foo</li>
                <li>bar</li>
            </ul>
            <ul class="hidden">
                <li>hid</li>
                <li>den</li>
            </ul>
            
            <a href="#" class="showMore">show more</a>
        </div>
        
    </body>
</html>

CSS

h2 {
    font-weight: bold;
}

.container {
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.hidden {
    display: none;
}


.hidden.show {
    display: block;
}

JavaScript

$(document).ready(function() {
    $(".showMore").click(function(e) {
        e.preventDefault();

        var element = $(this);
        var parent = element.parent();

        element.addClass("hidden");
        $("ul.hidden", parent).addClass("show");
    });
});