JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
    <li><a href="#" class="link">Lorem</a>

    </li>
    <li><a href="#" class="link">Lorem</a>

    </li>
    <li><a href="#" class="link">Lorem</a>

    </li>
</ul>
<div class="collapse-panel">
    <div class="collapse-header">Lorem</div>
    <div class="collapse-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia aliquam nihil tempora vitae ad quasi ex sunt natus obcaecati numquam quidem quia velit debitis error eius? Sequi quo voluptatem numquam.</div>
</div>
<div class="collapse-panel">
    <div class="collapse-header">Lorem</div>
    <div class="collapse-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia aliquam nihil tempora vitae ad quasi ex sunt natus obcaecati numquam quidem quia velit debitis error eius? Sequi quo voluptatem numquam.</div>
</div>

CSS

ul.nav {
    list-style: none;
}
ul.nav>li {
    background-color:lightgray;
    display: inline-block;
    padding:5px 10px;
}
ul.nav>li>a {
    text-decoration: none;
    color:black;
}
ul.nav>li:hover {
    background-color:gray;
}
.collapse-header {
    height:20px;
    background-color:gray;
    padding:2px 10px;
}
.collapse-content {
    border:1px solid lightgray;
    padding:5px;
}

JavaScript

$('.collapse-header').on('click', function (e) {
    $(this).parent('.collapse-panel').find('.collapse-content').slideToggle();
});