JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="menuTitle">Título 1</div>
    <div class="menuContent">Material 1</div>
    <div class="menuTitle">Título 2</div>
    <div class="menuContent">Material 2</div>
    <div class="menuTitle">Título 3</div>
    <div class="menuContent">Material 3</div>
</body>

CSS

.menuTitle {
    padding-left: 5px;
    border: 1px solid #CCCCCC;
    height: 20px;
    color: #A5A5A5;
    background-color: #E4E4E4;
    width: 300px;
    font-family:"Arial";
    font-size: 15px;
    font-weight: bold;
}
.menuContent {
    width: 300px;
    font-family:"Arial";
    font-size: 11px;
    margin-bottom: 5px;
}

JavaScript

$(document).ready(function () {
    $(".menuContent").hide();
    $(".menuTitle").click(function () {
        $(this).next('.menuContent').slideDown('fast').siblings('.menuContent:visible').slideUp('fast');
    });
    });