JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<ul class="tree">
    <li class="parent_li">
        <span>HELLO</span>
        <ul>
            <li>aaaaa</li>
            <li>aaaaa</li>
            <li>aaaaa</li>
            <li>aaaaa</li>
            <li>aaaaa</li>
        </ul>
    </li>
    <li class="parent_li">
        <span>BRE</span>
        <ul>
            <li>aaaaa</li>
            <li>aaaaa</li>
            <li>aaaaa</li>
            <li>aaaaa</li>
            <li>aaaaa</li>
        </ul>
    </li>
</ul>

CSS

li {cursor: pointer; }
.parent_li li { display: none; }
.parent_li.active li { display: list-item; }

JavaScript

$('.tree').on('click', 'li', function(){
    $(this).toggleClass('active');
});