1

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 introducir la descripción de la imagen aquí

Si el acordeón se abre que el icono cambie a esta forma

introducir la descripción de la imagen aquí

$('#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

3

1 respuesta 1

1

Logre darle solución añadiendo un elemento active despues de la etiqueta que necesitaba el efecto de giro.

.sidenav .collapsible li.active .right {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.