JSFiddle - React, Tailwind, and code Playground

by Nicholas Hazel

HTML

<ul>
    
    <li class="sec">Heading One</li>
    <li><ul>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
        
        <li class="sec">Heading Two</li>
        <li><ul>
            <li>Third</li>
            <li>Third</li>
            <li>Third</li>
        </ul></li>
        
    </ul></li>
    
    <li class="sec">Heading One</li>
    <li><ul>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
    </ul></li>
    
</ul>

CSS

ul li {
    list-style:none;
}
.sec {
    background:#efefef;
    padding:25px;
    font-size:24px;
}

JavaScript

$(function(){
    $('li.sec').on('click', function() {
        $(this).next('ul li').slideToggle();
    });
});