Following the documentation on
http://twitter.github.com/bootstrap/javascript.html#collapse you should use
data-target instead of href, to define the id to collapse.
And your target href is: href="#note_{{ note.id }}"
but your real target is: notes{{ note.id }}
They should be the same.
On Wed, Jul 4, 2012 at 12:43 AM, DF <[email protected]> wrote:
> 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>
>
>
