JSFiddle - React, Tailwind, and code Playground

by sensei

HTML

<nav>
    <dl>
        <dt>Home</dt>
        <dd>
            <ul>
                <li>first link</li>
                <li>second link</li>
                <li>third link</li>
                <li>fourth link</li>
                <li>fifth link</li>
            </ul>
        </dd>
        
        <dt>About us</dt>
        <dd>
            <ul>
                <li>first link</li>
                <li>second link</li>
                <li>third link</li>
                <li>fourth link</li>
                <li>fifth link</li>
            </ul>
        </dd>
        
        <dt>Services</dt>
        <dd>
            <ul>
                <li>first link</li>
                <li>second link</li>
                <li>third link</li>
                <li>fourth link</li>
                <li>fifth link</li>
            </ul>
        </dd>
    </dl>
</nav>

CSS

dl {
    width: 300px;

    margin: 20px auto;
}
dt {
    padding: 5px 10px;

    background: #000;
    border-bottom: 1px solid #fff;

    color: #fff;
    font-weight: bolder;
    cursor: pointer;
}
dd {
    margin: 0;
    padding: 10px;

    border: 1px solid #ccc;
    border-top: 1px solid #fff;
}
dd ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
dd li{
    margin: 0 0 5px;
    padding: 0;

    border-bottom: 1px dashed #aaa;
    list-style: none;
}

JavaScript

$(document).ready(function(){
    $('dd').hide();
   
    $('dt').click(function(){
        $(this).next().slideToggle(300).siblings('dd').slideUp();
    });
});