0

Estoy tratando de saber cuando el accordion este "abierto" para cambiarle a la siguiente propiedad al elemento:

<li>
    <div class="collapsible-header"><i class="material-icons">close</i>Cerrar</div>
    <div class="collapsible-body"><span>lorem ipsum</span></div>
</li>

En resumen: Necesito que el estado inicial del accordion esté cerrado y diga en la etiqueta <li> "Abrir" y cuando este abierto el accordion diga en la etiqueta <li> Cerrar, también cambiando los icons.

Estoy probando con lo siguiente, pero no se como determinar cuando está abierto o cerrado.

 var elem = document.querySelector('.collapsible.expandable');

var instance = M.Collapsible.init(elem, {
  accordion: false
});
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Blog Pablo</title>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>

<body>
    <div class="container">

        <h5>A demo of Expandable</h5>

        <ul class="collapsible expandable">
            <li>
                <div class="collapsible-header"><i class="material-icons">done</i>Abrir
                </div>
                <div class="collapsible-body"><span>Using expandable will keep this opened unless closed by the
                        user!</span></div>
            </li>
        </ul>
    </div>

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 
       
   
</body>

</html>

1 respuesta 1

1

Puedes escuchar el evento de apertura y cierre de la instancia, onOpenEnd y onCloseEnd respectivamente, y allí modificar el DOM a cómo requieres.

var elem = document.querySelector('.collapsible.expandable');

var instance = M.Collapsible.init(elem, {
  accordion: false,
  onCloseEnd: function () {
    /************************************************************************  AQUÍ*/
    // Se cerró, cambiar a 'Abrir'
    console.log('cerrado')
  },
  onOpenEnd: function() {
    /************************************************************************ y AQUÍ*/
    // Se abrió, cambiar a 'Cerrar'
    console.log('abierto')
  }
})
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Blog Pablo</title>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>

<body>
    <div class="container">

        <h5>A demo of Expandable</h5>

        <ul class="collapsible expandable">
            <li>
                <div class="collapsible-header"><i class="material-icons">done</i>Abrir
                </div>
                <div class="collapsible-body"><span>Using expandable will keep this opened unless closed by the
                        user!</span></div>
            </li>
        </ul>
    </div>

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 
       
   
</body>

</html>

En las funciones para los eventos que comentó arriba, ya sería cuestión de buscar los elementos que quieres modificar, que en este caso son '.collapsible-header' y '.collapsible-body'. Aquí sólo hay que considerar que cómo son clases si tuvieses otras estructuras con las mismas clases, y la modificación lo haces sobre el resultado del query a estas clases, también esas se modificarían. Puedes a) considerar usarlas con ids, o b) modificar solo las del elemento en cuestión.

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.