JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<ul id="expList">
  <li>X1 node
    <ul>
        <li>X node
            <ul>
                <li>1 node</li>
                <li>2 node</li>
                <li>3 node</li>
                <li>4 node</li>
                <li>X node
                    <ul>
                        <li>1 node</li>
                        <li>2 node</li>
                        <li>3 node</li>
                        <li>4 node</li>
                        <li>X node
                            <ul>
                                <li>1 node</li>
                                <li>2 node</li>
                                <li>3 node</li>
                                <li>4 node</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>X node
            <ul>
                <li>1 node</li>
                <li>2 node</li>
                <li>3 node</li>
                <li>4 node</li>
            </ul>
        </li>
    </ul>
</li>
<li>X2 node
    <ul>
        <li>X node
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </li>
        <li>X node
            <ul>
                <li>1 node</li>
                <li>2 node</li>
                <li>3 node</li>
                <li>4 node</li>
            </ul>
        </li>
        <li>X node
            <ul>
                <li>1 node</li>
                <li>2 node</li>
                <li>3 node</li>
                <li>4 node</li>
            </ul>
        </li>
        <li>X node
            <ul>
                <li>1 node</li>
                <li>2 node</li>
                <li>3 node</li>
                <li>4 node</li>
            </ul>
        </li>
    </ul>
  </li>
</ul>

CSS

ul>li>ul {
    	display: none;
    }

JavaScript

$('li').click(function(e){
    	e.stopPropagation();
    	if(this.getElementsByTagName("ul")[0].style.display =="block")
    		$(this).find("ul").slideUp();
    	else
    		$(this).children(":first").slideDown();
    });