1

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.

Imagen de accordion de materializecss Imagen de accordion de materializzecss

Documentación de accordion de Materializecss

2
  • Ya lo intenté pero no funcionó Commented el 19 abr. 2018 a las 17:47
  • he agregado una respuesta para ver si te es de ayuda y he borrado mi comentario. Commented el 19 abr. 2018 a las 17:57

1 respuesta 1

1

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>

4
  • 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

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.