JSFiddle - React, Tailwind, and code Playground

HTML

<div class="categories">     
    <h3>
        <img src="http://i.imgur.com/t5UXT.gif" />
        <a href="#">CCTV</a>
        <sub>Circuito Cerrado</sub>
    </h3>     
    <div>
        <ul>
            <li>
                <div class="categories"> 
                    <h3>
                        <img src="http://i.imgur.com/TThAk.gif" />
                        <a href="#" class="subcategory">ALARMAS</a>
                        <sub>Magellan Sprit Spectra Digiplex/Evo</sub>
                    </h3>     
                    <div>
                        <ul>
                            <li><a href="#">Control de Asistencia</a></li>
                            <li><a href="#">Controladores de Accesso</a></li>
                            <li><a href="#">Controladores de Asistencia</a></li>
                            <li><a href="#">Chapas Electricas</a></li>
                            <li><a href="#">Chapas Electromagneticas</a></li>
                            <li><a href="#">Tarjetas de Proximidad</a></li>
                        </ul>
                    </div>
                </div>
            </li>
            
            <li><a href="#">Controladores de Accesso</a></li>
            <li><a href="#">Controladores de Asistencia</a></li>
            <li><a href="#">Chapas Electricas</a></li>
            <li><a href="#">Chapas Electromagneticas</a></li>
            <li><a href="#">Tarjetas de Proximidad</a></li>
        </ul>
    </div>
    
    <h3>
        <img src="http://i.imgur.com/TThAk.gif" />
        <a href="#">ALARMAS</a>
        <sub>Magellan Sprit Spectra Digiplex/Evo</sub>
    </h3>     
    <div>
        <ul>
            <li><a href="#">Control de Asistencia</a></li>
            <li><a href="#">Controladores de Accesso</a></li>
            <li><a href="#">Controladores de Asistencia</a></li>
            <li><a href="#">Chapas Electricas</a></li>
            <li><a href="#">Chapas Electromagneticas</a></li>
            <li><a href="#">Tarjetas...

CSS

.categories { 
    width: 400px;
    margin:10px;
}

.categories h3 {
    color: #4A7171;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    margin-top: 14px;
}

.categories h3 img { cursor:pointer;}

.categories sub { 
    font-size:10px; 
    margin-bottom:10px; 
    margin-left:15px;
}

.categories ul { }
.categories ul li { 
    font-size: 11px; 
    border-bottom:1px solid gray; 
    font-family: "Lucida Grande","Trebuchet MS",Verdana,Helvetica,sans-serif;
    border-bottom: 1px solid #DDDDDD;
    margin-top:5px;
    width:179px;
}

.categories ul li a { margin-left:26px; }
.categories ul li a.subcategory { margin-left:3px; }
.categories a:visited { color:#4A7171; text-decoration:none; }
.categories a:hover { color:#4A7171; text-decoration:none; }
.categories a { color:#4A7171; text-decoration:none; }

sub { display:block; }

JavaScript

var minusImgUrl = "http://i.imgur.com/t5UXT.gif",
    plusImgUrl  = "http://i.imgur.com/TThAk.gif";

//$('.categories').accordion({ collapsible: true });

$('.categories').accordion({
   collapsible: true,
   changestart: function(event, ui) {
       $('h3 img').attr('src', 'http://i.imgur.com/TThAk.gif');
       ui.newHeader.find("img").attr("src", minusImgUrl);
       ui.oldHeader.find("img").attr("src", plusImgUrl);
   }
});

$('.categories h3 img').click(function() {
    $(this).next().click();
});