JSFiddle - React, Tailwind, and code Playground

by Simon Hartley

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<html>

<body>
<div>
<ul id="menu">
    <li>Automotive
       <ul>
            <li>Dodge
               <ul>
                    <li>Challenger
                        <ul>
                           <li>Side Stripes </li>
                           <li>Hood Graphics </li>
                           <li>Rally Stripes </li>

                        </ul>
                    </li>
                    <li>Charger </li>
                    <li>Dart </li>
                    <li>Durango </li>


               </ul>
            </li>

            <li>Chevy</li>
            <li>Ford</li>
            <li>Fiat</li>
            <li>Hyundai</li>
            <li>Bentley</li>

    </li>
</ul>
</div>



<UL id="menu-tree">
    <LI><span>Example Item 1</span></LI>
    <LI><span>Example Item 2</span></LI>
    <LI><span>Example Sub List 3</span>
        <UL>
            <LI><span>Example Item 3.1</span></LI>
            <LI><span>Example Item 3.2</span></LI>
            <LI><span>Example Item 3.3</span></LI>
        </UL>
    </LI>
    <LI><span>Example Sub List 4</span>
        <UL>
            <LI><span>Example Item 4.1</span></LI>
            <LI><span>Example Item 4.2</span></LI>
            <LI><span>Example Item 4.3</span>
                <UL>
                    <LI><span>Example Item 4.3.1</span></LI>
                    <LI><span>Example Item 4.3.2</span></LI>
                    <LI><span>Example Item 4.3.3</span></LI>
                </UL>
            </LI>
        </UL>
    </LI>
</UL>

</body>

</html>

CSS

ul, li {
    list-style-type: none;
    padding: 0; margin: 0;
}

JavaScript

//$('#menu').(function() {
    // Find list items representing folders and
    // style them accordingly.  Also, turn them
    // into links that can expand/collapse the
    // tree leaf.
    $('#menu').find('li > ul').each(function(i) {
        // Find this list's parent list item.
        var parent_li = $(this).parent('li');

        // Style the list item as folder.
       

        // Temporarily remove the list from the
        // parent list item, wrap the remaining
        // text in an anchor, then reattach it.
        var sub_ul = $(this).remove();
        parent_li.wrapInner('<a/>').find('a').click(function() {
            // Make the anchor toggle the leaf display.
            sub_ul.toggle('slide');
        });
        parent_li.append(sub_ul);
    });

    // Hide all lists except the outermost.
    $('ul ul').hide();
//});

$(function(){
$('#menu-tree').find('span').click(function(e){
    $(this).parent().children('ul').toggle('slide');
});
});