Tengo un acordeón con 6 botones (clase de botón ".course-accordion") para expandir o contraer.
Debajo del acordeón, tengo un div ("colapso inferior") que me gustaría ocultar si todos los acordeones están colapsados, pero visible si 1 (o más) están abiertos. Este div contiene un botón para colapsar todo.
He intentado mostrar/ocultar si la clase de botón contiene 'activo', y he intentado mostrar/ocultar si el contenido del acordeón tiene una altura máxima de 0/100%. Parece que no puedo hacerlo funcionar.
¿Algunas ideas? jQuery o Javascript estaría bien aquí.
Ejemplo de marcado de código:
<div class="course-wrapper"> <button class="course-accordion active">Course 01</button> <div class="course-panel">Course Content</div> </div> <div class="course-wrapper"> <button class="course-accordion">Course 02</button> <div class="course-panel">Course Content</div> </div> <div class="course-wrapper"> <button class="course-accordion">Course 03</button> <div class="course-panel">Course Content</div> </div> <!-- I want this to be hidden unless one or all of the above accordions is active --> <div class="expand-collapse"> <a class="collapse-bottom">Collapse All</a> </div>Aquí hay solo un ejemplo de un pseudocódigo (lo siento, ha pasado un tiempo desde que escribí JS o JQuery, así que ignóralo si esto no ayuda, pero pensé que tal vez podría ayudarte a encontrar el camino correcto), pero esto podría lograrse de muchas maneras.
Realice un seguimiento del estado del acordeón al tener un contador que se actualiza con la cantidad de divisiones de acordeón que tienen una clase == "Activo" cada vez que se hace clic en uno de los botones de acordeón.
//Luego, "Mientras" el contador sea mayor o igual a 1, muestre el botón Ocultar/Mostrar.
Espero que ayude. Estaría encantado de escribir algo, pero solo quería dar una implementación rápida y sucia para que pueda comenzar. Pero, de nuevo, si está buscando algo más concreto, estoy seguro de que yo, o alguien más, estaría encantado de ayudarle.
Puede usar hasClass() para verificar si un determinado elemento tiene una clase en particular.
Esto se puede hacer usando jquery:
<div class="course-wrapper"> <button class="course-accordion">Course 01</button> <div class="course-panel">Course Content</div> </div> <div class="course-wrapper"> <button class="course-accordion">Course 02</button> <div class="course-panel">Course Content</div> </div> <div class="course-wrapper"> <button class="course-accordion">Course 03</button> <div class="course-panel">Course Content</div> </div> <div class="expand-collapse"> <a href="#" class="collapse-bottom">Collapse All</a> </div> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script> function check_accord() { //check if any button has class active and shows the collapse-bottom element if ($(".course-accordion").hasClass("active")) { $(".collapse-bottom").show(); } else { $(".collapse-bottom").hide(); } } $(".course-accordion").click(function () { //toggles the active class of the clicked button $(this).toggleClass("active"); check_accord(); }); $(".collapse-bottom").click(function () { //removes the active class from all the buttons when collapse bottom is clicked $(".course-accordion").removeClass("active"); check_accord(); }); check_accord(); //executes the function each time the webpage is loaded </script>