Activating Multiple Twitter Bootstrap Collapse Elements

Question

I am relatively new to JQuery, so please excuse this question if it seems trivial. I have a page, as outlined by the HTML below, with three tab elements, each of which may have an unspecified number of collapsible elements within. I am using a python dictionary called 'groupings' to pass data from the server, it's structure is as follows:

groupings = {tab1: [[group, [(key, value), ...]], ...], ...}

I am using Twitter Bootstrap as a frontend framework and Jinja2 as a templating engine, with Python 2.7 on the backend. What I am unable to do with the following code is activate the collapsible elements. I am guessing that some JQuery is required that is different from that presented on the Bootstrap documentation. I have tried various permutations of the activating functions listed there, but because I am not yet very well versed in the use of JQuery, have been unsuccessful. Any help in doing so would be appreciated.

      <section id="tabs">
        <div class="page-header">
          <h1>Togglable tabs <small>bootstrap-tab.js</small></h1>
        </div>
        <div class="row">
          <div class="span9 columns">
            <ul id="myTab" class="nav nav-tabs">
              <li class="active"><a href="#tab1" data-toggle="tab">tab1 title</a></li> 
              <li><a href="#tab2" data-toggle="tab">tab2 title</a></li> 
              <li><a href="#tab3" data-toggle="tab">tab3 title</a></li> 
            </ul>
          <div id="myTabContent" class="tab-content">
          {% for category in ['tab1', 'tab2', 'tab3'] %}
            {% if category == 'tab1' %}
              <div class="tab-pane fade in active" id="{{category}}">  
            {% else %}
              <div class="tab-pane fade" id="{{category}}">  
            {% endif %}
                <div class="span8">
                  <div class="accordion" id="accordion2">
                    {% for group in groupings[category] %}
                    <div class="accordion-group">
                      <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#{{group[0]}}">
                          {{group[0]}}
                        </a>
                      </div>
                      <div id="{{group[0]}}" class="accordion-body collapse in">
                        <div class="accordion-inner">
                          {% for key, value in group[1] %}
                            <dl class="dl-horizontal">
                              <dt>{{key}}:</dt>
                              <dd>{{value}}</dd>
                            </dl>
                          {% endfor %}
                        </div>
                      </div>  <!-- .accordion body collapse in -->
                    </div>
                  {% endfor %}
                </div>       <!--  .accordion -->                
              </div>   
            </div>
            {% endfor %}
          </div>    <!-- .tab content -->
        </div>
      </div>   <!-- row -->
    </section>   <!-- tabs -->

Answer 1

The standard $('.collapse').collapse(); collapse activation would work in your case, but you are already using data-toggle="collapse". You shouldn't use both.

As seen in this demo (jsfiddle), it works.

There is one thing that might cause an unexpected behavior : the accordions IDs are not unique. Any ID'ed element in a loop should be made unique :

<div class="accordion" id="accordion_{{category}}">
  <!-- ... -->
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_{{category}}" href="#{{group[0]}}">...</a>
  <!-- ... -->
</div>