JSFiddle - React, Tailwind, and code Playground

by vaff

HTML

<!--- collapse menu --->
<div id="Menu">
    <p>Overskrift</p>
    <div class="section">
        <a href="#">Menu</a> <a href="#">Menu</a>
        <a href="#">Menu</a> 
    </div>
    
    <p>Overskrift</p>
    <div class="section">
        <a href="#">Menu</a> 
        <a href="#">Menu</a>
        <a href="#">Menu</a>
    </div>
</div>

CSS

#Menu {
    width: 183px;
}

    #Menu > p {
        color: #222222;
        margin: 0;
        padding-left: 10px;
        cursor: pointer;
    }

    #Menu .section {
        padding-left: 15px;
        padding-bottom: 5px;
    }
        #Menu .section a {
            display: block;
            color: #222222;
            padding-left: 15px;
        }

JavaScript

$(function () {
    $("a")
        .mouseover(function () {
            $(this).addClass("highlightRow");
        })
        .mouseout(function () {
            $(this).removeClass("highlightRow");
        });

    $(".section").hide();
    $("#Menu > p")
        .click(function () {
            $(this).next().slideToggle("Slow");
    });
});