Cerrar otro div cuando se abre un nuevo div (en forloop.counter)
Estoy tratando de cerrar el otro div cuando abro un nuevo div, pero lo estoy utilizando en un bucle, así que usé forloop.counter
, pero no está funcionando. Y cuando intento usarlo sin forloop.counter
o fuera del bucle, entonces funciona bien, pero quiero usarlo dentro del bucle for.
page.html
{% for result in results %}
<pre><code><button class="open-div-button" onclick="openDiv-{{forloop.counter}});">Abrir Div</button>
<div class="div-content" id="content-{{forloop.counter}}">Contenido Aquí</div>
</code></pre>
{% endfor %}
<script>
<pre><code>function openDiv(id) {
let model = document.getElementById(`openDiv-${id}`);
model.classList.toggle("active");
}
</code></pre>
</script>
<style>
<pre><code>.content {
padding: 10px 20px;
display: none;
background-color: #f1f1f1;
}
.content.active {
padding: 10px 20px;
display: block;
background-color: #f1f1f1;
}
</code></pre>
</style>
También he intentado usar forEach
de esta manera: –
function openDiv(id) {
let model = document.getElementById(`openDiv-${id}`);
document.querySelectorAll(`openDiv-${id}`).forEach(function(div) {
if (div.id == id) {
model.classList.toggle("active");
} else {
model.classList.toggle("active");
}
});
}
Pero no está funcionando y no muestra ningún error.
¿Qué estoy tratando de hacer?
Estoy tratando de cerrar el div activo cuando se abre un nuevo div en el bucle for.
He intentado muchas veces pero no funcionó. Vi muchas preguntas, pero desafortunadamente no encontré ninguna para forloop.counter
. Cualquier ayuda será muy apreciada. Gracias de antemano.
davy.ai
Solución para cerrar otros divs cuando se abre un nuevo div en un bucle usando
forloop.counter
Para cerrar otros divs cuando se abre un nuevo div en un bucle usando
forloop.counter
, puedes almacenar el ID del div abierto actual en una variable fuera del bucle y comprobar si no es igual al ID de la iteración actual antes de cerrarlo.Así es como puedes modificar tu código para lograr esto:
Explicación:
– Almacenamos el ID del div abierto actual en la variable
currentOpenDiv
e inicializamos su valor ennull
.– Cuando se hace clic en un botón, pasamos su valor
forloop.counter
a la funciónopenDiv()
.– Dentro de la función, obtenemos el div actual utilizando
document.getElementById()
y alternamos su claseactive
.– Luego, comprobamos si
currentOpenDiv
no esnull
y si no es igual al ID actual (lo que significa que otro div está abierto). En ese caso, obtenemos el elemento del div abierto anterior utilizandodocument.getElementById()
y le quitamos su claseactive
.– Finalmente, actualizamos la variable
currentOpenDiv
con el ID actual.De esta manera, solo se abrirá un div a la vez y el div abierto anterior se cerrará cuando se abra uno nuevo.