I am working on a blog kind of web app using Django. On my home page, I want to show all the posts. Every post contains one collapse panel.
Initially, id's to trigger collapse panel was hardcoded so all the collapse panel opens on clicking on one post-collapse panel.
So I changed the id's that are used to trigger collapse panel. I used post id as HTML id or triggering the collapse panel.
But the problem is the collapse panel is not working at all.
This is how I changed hardcoded id's.
{% 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 %}
This is the code I grabbed from bootstrap4 components.
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
