Django Loop for Window expand/collapse without JQuery - html

Question

I'm working using Django. I'm new to coding and working on my first project. I do not know JQuery, but I read that it's possible to collapse/expand a window without JQuery.
I followed this webpage: CSS Expand/Collapse Section (A PEN BY Peter Nguyen)
The problem is that I'm trying to use this in a for loop. I'm able to get the layout how I want it, but when I use expand/collapse it only works for the first item in the loop. So, expand/collapse works perfectly on the first iteration of the loop, but not the rest.
HTML
{% for assignment in assignments %}
<form id=form action= "/project/assignments" method='post'>
{% csrf_token %}
<label class=labels><a href="{% url 'project:assg' assignment_id=assignment.id %}">
Assignment: {{assignment.denominator}} - {{assignment.description}} </a></label>
<input id="toggle" type="checkbox">
<label for="toggle" id=labels2>Criteria</label>
<div id=expand>
<section>
<p>[Number] [Name]: Expand content goes here.
</p>
</section>
</div>
<section>
<textarea id=boxes name="review">{{assignments.review}}</textarea>
<input type="hidden" name="Function_id" value={{assignments.id}}>
<input class=save_tasks type="submit" value="Save">
</section>
</form>
CSS
#toggle{
display: none;
visibility:hidden;
}
#labels2{
display: block;
padding: 0.5em;
text-align: center;
background-color: white;
border-top: 4px solid #5e6b39;
border-left: 4px solid #5e6b39;
border-right: 4px solid #5e6b39;
width: 881px;
color: black;
font-size: 20px;
font-weight: bold;
margin: -6px;
margin-top: 5px;
margin-left: 0px;
}
#labels2:hover {
color: #000;
}
#labels2::before {
font-family: Consolas, monaco, monospace;
font-weight: bold;
font-size: 15px;
content: "+";
vertical-align: text-top;
display: inline-block;
width: 20px;
height: 20px;
margin-right: 3px;
background: radial-gradient(ellipse at center, #CCC 50%, transparent
50%);
}
#expand {
height: 0px;
overflow: hidden;
transition: height 0.5s;
background-color: white;
color:black;
font-size: 20px;
border-bottom: 4px solid #5e6b39;
border-left: 4px solid #5e6b39;
border-right: 4px solid #5e6b39;
width: 881px;
padding: 10px;
/* margin-top: -30px; */
}
#toggle:checked ~ #expand {
height: 180px;
}
#toggle:checked ~ #labels2::before {
content: "-";
}
How do I get the collapse/expand division to expand/collapse for all the items in the loop and not just the first one? Is my Django loop incorrect?
Thanks!

Answer 1

The loop is not the problem here.
You only use IDs in your code, and since they are supposed to be unique on a page, the browser uses only the first element that can be found.
The id global attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
I have adjusted your code once in the necessary places:
.toggle {
display: none;
visibility:hidden;
}
.labels2 {
display: block;
padding: 0.5em;
text-align: center;
background-color: white;
border-top: 4px solid #5e6b39;
border-left: 4px solid #5e6b39;
border-right: 4px solid #5e6b39;
width: 881px;
color: black;
font-size: 20px;
font-weight: bold;
margin: -6px;
margin-top: 5px;
margin-left: 0px;
}
.labels2:hover {
color: #000;
}
.labels2::before {
font-family: Consolas, monaco, monospace;
font-weight: bold;
font-size: 15px;
content: "+";
vertical-align: text-top;
display: inline-block;
width: 20px;
height: 20px;
margin-right: 3px;
background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%);
}
.expand {
height: 0px;
overflow: hidden;
transition: height 0.5s;
background-color: white;
color:black;
font-size: 20px;
border-bottom: 4px solid #5e6b39;
border-left: 4px solid #5e6b39;
border-right: 4px solid #5e6b39;
width: 881px;
padding: 10px;
/* margin-top: -30px; */
}
.toggle:checked ~ .expand {
height: 180px;
}
.toggle:checked ~ .labels2::before {
content: "-";
}
{% for assignment in assignments %}
<form id=form action= "/project/assignments" method='post'>
{% csrf_token %}
<label class=labels>Assignment: {{assignment.denominator}} - {{assignment.description}}</label>
<input id="toggle-{{assignments.id}}" class="toggle" type="checkbox">
<label for="toggle-{{assignments.id}}" class="labels2">Criteria</label>
<div class="expand">
<section>
<p>[Number] [Name]: Expand content goes here.</p>
</section>
</div>
<section>
<textarea id=boxes name="review">{{assignments.review}}</textarea>
<input type="hidden" name="Function_id" value={{assignments.id}}>
<input class=save_tasks type="submit" value="Save">
</section>
</form>
At this point it is important that the input class="toggle" and the label class="labels2" get a unique distinction in the id and the for attribute, so that the click on the label also checks the correct input.
For this you should work with a dynamic value like toggle-{{assignments.id}} - Which I would also highly recommend in principle for all IDs in a loop.
I hope that could help :)