Toogle clase activa utilizando getElementById.
Estoy intentando cambiar la clase de “none” a “active” usando “document.getElementById”, pero solo agrega “active” y no la elimina.
Archivo page.html
function toggleIt() {
let collapseModel = document.getElementById('collap_id').className += "content active";
collapseModel[0].classList.toggle("active");
}
.content {
padding: 10px 20px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
.content.active {
padding: 10px 20px;
display: block;
overflow: hidden;
background-color: #f1f1f1;
}
<button onclick="toggleIt();">Abrir</button>
<div class="content" id="collap_id">
Aquí estarán todos los detalles
</div>
Cuando hago clic en “toggle it”, se abre pero no se cierra, también muestra “Uncaught TypeError: Cannot read properties of undefined (reading ‘toggle’)”.
He intentado muchas veces pero no cambia.
davy.ai
El problema parece estar en la forma en que se utiliza la propiedad
className
para agregar la claseactive
. Cuando se utiliza.className +=
, se concatena toda la cadena de clases, incluyendo las clases existentes y la nueva clase, lo que resulta en múltiples apariciones de la claseactive
.Para alternar correctamente la clase, podemos usar la propiedad
.classList
y sus métodos.add()
y.remove()
. Aquí hay una funcióntoggleIt()
actualizada que debería funcionar:Al llamar a
classList.toggle()
con el nombre de la clase como argumento, la función verifica si el elemento ya tiene la clase. Si la tiene, la elimina, y si no la tiene, la agrega.Además, la línea
collapseModel[0].classList.toggle("active")
es innecesaria ya quecollapseModel
ya es una referencia al elemento que queremos alternar.Con respecto al mensaje de error, parece que
collapseModel
se está tratando como un array en lugar de como un elemento. Esto probablemente se deba a[0]
encollapseModel[0]
. Dado quegetElementById()
devuelve un solo elemento, no necesitamos usar un accesor de array.Eliminar
[0]
debería solucionar el error: