JSFiddle - React, Tailwind, and code Playground

by sc0rp10

HTML

<div class="block">
    <h3>Заголовок</h3>
    <ul>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
    </ul>
</div>

<div class="block">
    <h3>Заголовок</h3>
    <ul>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
    </ul>
</div>

<div class="block">
    <h3>Заголовок</h3>
    <ul>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
        <li>Объект №1</li>
    </ul>
</div>

CSS

.block ul {
    display: none;
}
h3 {
    font-size:23px;
    display: inline-block;
    cursor:pointer;
    border-bottom:2px dotted;
}

JavaScript

$(function(){
    $("h3").on("click", function(){
        $(this).parent().find("ul").slideToggle(300);
    
    })
})