I'm attempting to design a collapsible accordion using Bootztrap and the
information is all appearing along with the accordion (looping through
using Django templates).
The only issue I'm having is the headings won't open to reveal the
contents. The first appears open from the start as it was designed to be
and displays the content but it won't close.
I used the exact same method on another template in my application for a
different accordion and it works without a hitch. Something appears to be
wrong with the 'click.' I'm hesitant to go into the JS because the other
one is functioning perfectly.
Any insight into how to repair this would be very appreciated.
Here's the code for the accordion section:
<div class="span4 offset1">
<h2>Notes</h2>
<div class="accordion media-padding" id="note_accordion">
{% for note in user.notes.all reversed %}
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle note-header well" data-toggle="collapse"
href="#note_{{ note.id }}">
{{ note.title }} – {{ note.date }}</a>
</div>
<div id="notes{{ note.id }}" class="accordion-body collapse{% if
forloop.counter0 == 0 %} in{% endif %}">
<div class="accordion-inner">
<div>
<p>{{ note.copy|linebreaksbr }}</p>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
