JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="depth-one">
    <li>Category 1 <span class="do">+</span>

        <ul class="depth-two">
            <li>Category 1.1 <span class="do">+</span>

                <ul class="depth-three">
                    <li>Category 1.2.1</li>
                    <li>Category 1.2.2</li>
                </ul>
            </li>
            <li>Category 1.2</li>
            <li>Category 1.3</li>
        </ul>
    </li>
    <li>Category 2 <span class="do">+</span>

        <ul class="depth-two">
            <li>Category 2.1</li>
            <li>Category 2.2</li>
            <li>Category 2.3</li>
        </ul>
    </li>
    <li>Category 3 <span class="do">+</span>

        <ul class="depth-two">
            <li>Category 3.1</li>
            <li>Category 3.2</li>
            <li>Category 3.3</li>
        </ul>
    </li>
</ul>

CSS

ul {
    list-style:none;
    padding:0;
    margin:0;
}
ul li {
    width:220px
}
.depth-one {
}
.depth-two {
    display:none;
}
.depth-three {
    display:none;
}
.do {
    float:right;
    font-weight:bold;
    color:blue;
    cursor:pointer;
}
.test {
    background-color:blue;
}

JavaScript

$(document).ready(function() {
	$('.do').on('click', function() {    $(this).next('ul').slideToggle().find('ul:visible').slideUp().prev('.do').text('+');
		$(this).text( $(this).text() == '+' ? '-' : '+' );
	});

	
});