JSFiddle - React, Tailwind, and code Playground

by lTasty

HTML

<div id="xmlDiv">
    <ul class="section">
        <li class="root"><span class="minus"><img src="https://cdn3.iconfinder.com/data/icons/inficons-set-2/512/651118-star-ratings-512.png" style="width:20px;"></span> Antivirus Compliance
            <ul class="mainlist" style="margin-left: -25px; display: block;">
                <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="Antivirus is not installed.">Not Installed</span>
                </li>
                <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="Antivirus is not running.">Not Running</span>
                </li>
                <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="Antivirus is not updated.">Not Updated</span>
                </li>
                <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="">Non Compliant</span>
                </li>
            </ul>
        </li>
    </ul>
    <ul class="section">
        <li class="root"><span class="minus"><img src="https://cdn3.iconfinder.com/data/icons/inficons-set-2/512/651118-star-ratings-512.png" style="width:20px"></span> Classification
            <ul class="mainlist" style="margin-left:-25px;">
                <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="">Classification</span>
                </li>
                <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="">DHCP</span>
                </li>
                <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="">p0f</span>
                </li>
            </ul>
        </li>
    </ul>

JavaScript

$("#xmlDiv").on("click", "ul", function(e) {
    var firstThis=$(this);
    $(this).find(".mainlist").slideToggle('slow', function () {

        if(firstThis.find('span.minus img').attr('src') == 'images/plus.png')
            firstThis.find('span.minus img').attr('src', "images/minus.png");
        else
            firstThis.find('span.minus img').attr('src', "images/plus.png");
    });
});