JSFiddle - React, Tailwind, and code Playground

by John Grivas

HTML

<div class="tree">
<button id="all">Toggle All</button>
 
<ul>
    <li><a>First Level</a>
    <ul>
        <li><a>Second Level</a></li>
        <li><a>Second Level</a></li>
        <li><a>Second Level</a></li>
    </ul>
    </li>
    <li><a>First Level</a>
    <ul>
        <li><a>Second Level</a>
    <ul>
        <li><a>Third Level</a></li>
        <li><a>Third Level</a></li>
        <li><a>Third Level</a>
    <ul>
        <li><a>Fourth Level</a></li>
        <li><a>Fourth Level</a></li>
        <li><a>Fourth Level</a>
    <ul>
        <li><a>Fifth Level</a></li>
        <li><a>Fifth Level</a></li>
        <li><a>Fifth Level</a></li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>
    </li>
        <li><a>Second Level</a></li>
    </ul>
    </li>
        <li><a>First Level</a>
    <ul>
        <li><a>Second Level</a></li>
        <li><a>Second Level</a></li>
    </ul>
    </li>
</ul>
</div>

JavaScript

$( document ).ready( function( ) {
    $( '.tree li' ).each( function() {
        if( $( this ).children( 'ul' ).length > 0 ) {
            $( this ).addClass( 'parent' );     
        }
    });
 
    $( '.tree li.parent > a' ).click( function( ) {
        $( this ).parent().toggleClass( 'active' );
        $( this ).parent().children( 'ul' ).slideToggle( 'fast' );
    });
 
    $( '#all' ).click( function() {
 
        $( '.tree li' ).each( function() {
            $( this ).toggleClass( 'active' );
            $( this ).children( 'ul' ).slideToggle( 'fast' );
        });
    });
 
});