Close other div when new div is opened (in forloop.counter)

I am trying to close the other div when I open a new div, But I am using in loop so I used forloop.counter But it is not working. And when I try to use without forloop.counter or outside the loop then it is working fine, but I want to use inside the for loop.

page.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>

I have also tried using forEach like :-

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");
    }
  });
}

but it is not working and it is not showing any error.

What I am trying to do?

I am trying to close active div when new div is open in for loop.

I have tried many times but it didn’t work. I seen many questions, but unfortunately I didn’t find any of them for forloop.counter. Any help would be much Appreciated. Thank You in Advance.

Answer

You can do it like this (if forloop.counter works without problem):

{% 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 %}
<style>
.div-content{
    padding: 10px 20px;
    display: none;
    background-color: #f1f1f1;
}

.div-content.active {
    padding: 10px 20px;
    display: block;
    background-color: #f1f1f1;
}
</style>
<script>
  function openDiv(id) {
    let model = document.getElementById(`content-${id}`);
    let currentActive = document.querySelector('.div-content.active');
    if(currentActive){
      currentActive.classList.remove('active');
    }

    if(currentActive != model){
      model.classList.add("active");
    }
  }
</script>

Advertisement

Answer