JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<ul>
    <li>
        <span class="header">hello1</span>
        <ul>
            <span class="header"><li>-inside</li></span><ul>
                <li>-inside</li>
                <li>-inside</li>
                <li>-inside</li>
                <li>-inside</li>
        </ul>  
            <li>-inside</li>
            <li>-inside</li>
            <li>-inside</li>
            <li>-inside</li>
        </ul>
    </li>
    <li><span class="header">hello</span></li>
    <li><span class="header">hello</span></li>
    <li><span class="header">hello</span></li>
    <li>
        <span class="header">hello2</span>
        <ul>
            <li>-inside</li>
            <li>-inside</li>
        </ul>
    </li>
    <li><span class="header">hello</span></li>
</ul>

JavaScript

/*

PROBLEM
-----------
make the first li elements visible (toggle)

when hello1 is clicked "inside" elements become visible (toggle)

make it apply so that no matter how many li sub sets ti make the script will act upon them

*/



$("ul>li>ul").hide();

$('.header').click(function() {
    $(this).next('ul').toggle();    
});