Estoy tratando de cerrar el otro div cuando abro un nuevo div, pero estoy usando in loop, así que usé forloop.counter pero no funciona. Y cuando trato de usar sin forloop.counter o fuera del bucle, funciona bien, pero quiero usar dentro del bucle for.

página.html

 {% for result in results %} <button class="open-div-button" onclick="openDiv-{{forloop.counter}});">Open Div</button> <div class="div-content" id="content-{{forloop.counter}}">Content Goes Here</div> {% endfor %} <script> function openDiv(id) { let model = document.getElementById(`openDiv-${id}`); model.classList.toggle("active"); } </script> <style> .content { padding: 10px 20px; display: none; background-color: #f1f1f1; } .content.active { padding: 10px 20px; display: block; background-color: #f1f1f1; } </style>

También he intentado usar forEach como: -

 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 funciona y no muestra ningún error.

¿Qué estoy tratando de hacer?

Estoy tratando de close el div activo cuando se abre un nuevo div en bucle for.

Lo he intentado muchas veces pero no funcionó. Vi muchas preguntas, pero desafortunadamente no encontré ninguna para forloop.counter . Cualquier ayuda sería muy apreciada. Gracias de antemano.