JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>abc
        <ul class="hidden">
            <li>def
                <ul class="hidden">
                    <li>def</li>
                    <li>ght</li>
                </ul>
            </li>
            <li>ght</li>
        </ul>
    </li>
    <li>def
        <ul class="hidden">
            <li>def</li>
            <li>ght</li>
        </ul>
    </li>
    <li>ght</li>
</ul>

CSS

.hidden {
    display:none;
}

ul{
    list-style: none;
}

li {
    background-color:lightgray;
    padding:5px;
    margin-bottom:3px;
}

.caret{
    transform: rotateZ(-90deg);
    width:15px;
    height:15px;
}

.caret-rotated{
    transform: rotateZ(0deg);
}

JavaScript

$(document).ready(function () {
   $('li').prepend('<img class="caret" src="http://casinodesanmiguel.org/wp-content/themes/Superb/uBillboard/images/collapse.png" alt="">')
    $('li').on('click', function (e) {
        e.stopPropagation();
       $(this).children('img.caret').toggleClass('caret-rotated'); $(this).children('ul').slideToggle();
        
    });
});