JSFiddle - React, Tailwind, and code Playground

by Peony Gerochi

HTML

<ul>
    <li>
        <span>one</span>
        <ul>
            <li>one-one</li>
            <li>one-two</li>
            <li>one-three</li>
        </ul>
    </li>
    <li><span>two</span>
        <ul>
            <li>two-one</li>
            <li>two-two</li>
            <li>two-three</li>
        </ul>  
    </li>
    <li><span>three</span>
        <ul>
            <li>three-one</li>
            <li>three-two</li>
            <li>three-three</li>
        </ul>    
    </li>
    <li><span>four</span>
        <ul>
            <li>four-one</li>
            <li>four-two</li>
            <li>four-three</li>
        </ul>         
    </li>
    <li><span>five</span>
        <ul>
            <li>five-one</li>
            <li>five-two</li>
            <li>five-three</li>
        </ul>         
    </li>
</ul>

CSS

ul {
    font-family: arial;
}
ul ul {
    display: none;
}

ul li {
    color: blue;
}
ul li ul li {
    color: orange;
    padding-left: 10px;
}

JavaScript

$(document).ready(function() {
    
    $('ul li').click(function(e) {
        $(this).find('ul').slideDown();        
    });
    
    $('ul li ul li').click(function(e) {
        var newtext = $(this).text();
        $(this).parent('ul').parent('li').find('span').text(newtext);
        $(this).parent('ul').slideUp();    
        e.stopPropagation();        
    });

});