Estoy trabajando con Materialize usando acordeones collapsible y necesito que un icon se anime cuando el acordeón este abierto básicamente de esta forma.
si el acordeón está cerrado que el icono este de esta forma
Si el acordeón se abre que el icono cambie a esta forma
$('#probando').on('click', function () {
$('#icon-effect').css("transform", "rotate(180deg)")
});
<li id="probando">
<a class="collapsible-header">
<i class="material-icons">folder_special</i>Certificados
<i class="material-icons right" style="margin-right: 0;" id="icon-effect">expand_more</i>
</a>
<div class="collapsible-body">
<ul id="Opciones_Trabajador" runat="server">
</ul>
</div>
</li>
Ando intentando con Jquery y solo logro que se ponga hacia arriba, también requiero que cuando se de clic en otro collapsible el icon flecha regrese a su estado original.
Dejo lo que llevo.
Gracias