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