JavaScript - Acordeón. Cerrar un panel al abrir otro.

 
Vista:
sin imagen de perfil
Val: 2
Ha aumentado su posición en 51 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Acordeón. Cerrar un panel al abrir otro.

Publicado por Álvaro (3 intervenciones) el 27/10/2019 14:25:39
Hola, tengo un sitio en el que utilizo paneles acordeón para mostrar información. Me gustaría que al abriri un panel se cerrara otro si está abierto, O sea que solamente haya un panel abierto a la vez.

El sitio es t.ly/8ZnRB

y el código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
var acc = document.getElementsByClassName("accordion");
var i;
 
for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        /* Toggle between adding and removing the "active" class,
        to highlight the button that controls the panel */
        this.classList.toggle("active");
 
        /* Toggle between hiding and showing the active panel */
        var panel = this.nextElementSibling;
       if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
	if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
    });
}
</script>


Gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de ScriptShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Acordeón. Cerrar un panel al abrir otro.

Publicado por ScriptShow (692 intervenciones) el 30/10/2019 10:54:26
Saludos Álvaro,

he encontrado algo parecido que puede servir...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var accordions = document.getElementsByClassName("accordion");
 
for (var i = 0; i < accordions.length; i++) {
accordions[i].onclick = function() {
this.classList.toggle('active');
 
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
}
else {
content.style.maxHeight = content.scrollHeight + "px";
}
}
}

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar