I am new to programming and recently achieved success with my 'click' eventListener. When clicking on the first two li elements within the ul, the class of the div toggles on and off as expected. However, I encountered an issue where clicking on any li after the second one causes the class of every other div to toggle instead of the intended one. If you require further clarification, please feel free to ask.
As an example, let's say a for loop prints:
- Bench Press
- Deadlift
- Squat
- Shoulder press
- Curl
If I click on 'Bench Press' and 'Deadlift', the .info will toggle and display their respective information. But when I click on 'Squat', it mistakenly toggles the .info for 'Curl' and so forth...
Below is all the code provided:
<div>
{% for workout in workouts %}
<ul>
<li class="item">{{ workout.name }}</li>
{% autoescape false %}
<div class="info" id="info">
<p>{{ workout.description }}</p>
</div>
{% endautoescape %}
</ul>
{% endfor %}
</div>
let li = document.querySelectorAll("li");
let info = document.querySelectorAll(".info");
for (let i = 0; i < li.length; i++) {
li[i].addEventListener("click", function () {
info[i].classList.toggle("info");
});
}
.info {
display: none;
}