Tengo un accordion de Materialize que al hacer click muestra una tabla, lo que quiero hacer es que al dar en el "títutlo" (el div que tiene la clase collapsible-header) se cambie la clase de color de ese mismo div y al vovler a dar click vuelva al color original, pongo una captura de lo que pretendo hacer.
1 respuesta
Con añadir este estilo debería funcionar:
li.active .collapsible-header{
background-color:red;
color:white;//este es solo para mi ejemplo
}
Te dejo un ejemplo funcional:
EDIT
Si quieres mantener las clases que tenias ya asignadas, esto podria funcionarte:
li.active .collapsible-header{
background-color:red!important;
color:white;//este es solo para mi ejemplo
}
$(document).ready(function(){
$('.collapsible').collapsible();
});
li.active .collapsible-header{
background-color:red!important;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<ul class="collapsible collapsible-accordion">
<li class="active">
<div class="collapsible-header blue-grey darken-1" tabindex="0"><i class="material-icons">filter_drama</i></div>
<div class="collapsible-body" style="display: block;"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></div>
</li>
<li>
<div class="collapsible-header blue-grey darken-1" tabindex="0"><i class="material-icons">place</i></div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></div>
</li>
<li>
<div class="collapsible-header blue-grey darken-1" tabindex="0"><i class="material-icons">whatshot</i></div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></div>
</li>
</ul>
-
Ya vi por que no funciona, el hecho de que le ponga las clases "blue-grey darken-1" para que inicialmente estén en color gris hace que al hacer click no se cambie a color rojo. Commented el 19 abr. 2018 a las 18:14
-
codepen.io/JCarlos_Cst/pen/JvomzZ En ese link ya puse de ejemplo ya puse el primer elemento en color gris y no cambia pero los otros que no tienen las clases si cambia el color. Commented el 19 abr. 2018 a las 18:28
-
He editado mi respuesta, si vuelves a ejecutar el código ya cambia de color. el truco fue poner
background-color:red!important;
como te comente en la edición de la misma. Commented el 19 abr. 2018 a las 18:43 -
Perfecto! Muchas gracias, como no actualice la página no vi el cambio al ejecutar el código. Commented el 19 abr. 2018 a las 18:47