primero de todo dar las gracias.
Tengo un menu en arbol que cuando un nivel tiene subniveles muestra delante el simbolo + con la classe fa fa-plus-square-o lo que me gustaria que al hacer clic en un nivel con subniveles al desplegar y mostrar los niveles inferiores cambiara el fa fa-plus-square-o por fa fa-minus-square-o. Llevo un buen rato intentado y no lo consigo.
Código Javascript:
Ver original
<script type="text/javascript"> $(document).ready(function() { $("#accordion div").click(function() { if (false == $(this).next().is(':visible')) { $('#accordion2 ul').slideUp(300); $('a.activo').removeClass('activo'); $(this).children('a').addClass('activo'); } $(this).next().slideToggle(300); $('a.activo').removeClass('activo'); $(this).children('a').addClass('activo'); }); $('#accordion2 ul:eq(0)').show(); }); </script>
HTML
Código HTML:
<ul id="accordion"> <li class="pdlf-15"> <div><i class="fa fa-plus-square-o" aria-hidden="true"></i> <i class="fa fa-folder fa-lg" aria-hidden="true"></i> <a href="#" class="">Nivel 1</a></div> <ul style="display: block;"> <li class="pdlf-15"> <div><i class="fa fa-plus-square-o" aria-hidden="true"></i> <i class="fa fa-folder fa-lg" aria-hidden="true"></i> <a href="#" class="activo">Nivel 2</a></div> <ul style="display: block;"> <li class="pdlf-15"><i class="fa fa-file fa-lg" aria-hidden="true"></i> <a class="enllac" disabled="disabled" href="#">Nivel 3</a></li> </ul> </li> </ul> </li> </ul>