I have been developing a blog-style web application with Django. My goal is to display all the posts on the home page, with each post containing a collapse panel.
Initially, I had hardcoded the IDs to trigger the collapse panels, causing all the panels to open when clicking on any post-collapse panel.
To address this issue, I decided to use the post ID as the HTML ID for triggering the collapse panel. However, I encountered a problem as the collapse panels were not functioning properly.
Here is the modified code snippet where I made the changes:
{% for post in posts %}
<div class="container shadow mt-4 pl-3 pr-3 pb-3" style="border-radius: 10px;">
<div class="user row p-3">
<img class="rounded-circle img-avatar" src="{{ post.author.profile.image.url }}" alt="">
<p class="author-name font-weight-bold font ml-4 mt-3">Username</p>
</div>
<div class="question">
<p>{{ post.question }}</p>
</div>
<button class="mb-2" style="border: none; background-color: transparent" type="button"
data-toggle="collapse"
data-target={{ "#"|join:post.id }}
aria-expanded="false" aria-controls={{ post.id|slugify }}>
<i class="fas fa-angle-down pl-1 pr-1"></i>
</button>
<div class="collapse" style="overflow: hidden" id={{ post.id|slugify }}>
<div class="card card-body options">
<li class="options"><input type="radio" name="options"><span
class="pl-2 pr-3">{{ post.option1 }}</span></li>
<li class="options"><input type="radio" name="options"><span
class="pl-2 pr-3">{{ post.option2 }}</span></li>
<li class="options"><input type="radio" name="options"><span
class="pl-2 pr-3">{{ post.option3 }}</span></li>
<li class="options"><input type="radio" name="options"><span
class="pl-2 pr-3">{{ post.option4 }}</span></li>
{% if post.option5 %}
<li class="options"><input type="radio" name="options"><span
class="pl-2 pr-3">{{ post.option5 }}</span></li>
{% endif %}
</div>
<button type="submit" class="btn btn-primary float-right mt-3">Submit</button>
</div>
</div>
{% endfor %}
The above code was inspired by the Bootstrap 4 components.