title: Bootstrap accordion elements won't open
body: <p>I have a number of dynamically generated bootstrap accordions nested in tabs. It's all bootstrap. I have one accordion panel defaulting to open but once i click anywhere it closes and no others will open. </p>
  
  <p>I'm using the code right out off the example but filling in dynamica elements. I've checked all the other possibilities on here -making sure my data-target and/or href match the id of the accordion-body and it's all good. Someone suggested using data-target instead of just href, but that didn't help. Each accordion has a unique name and the calls to data-parent are correct. Here's the source code that generated what I copied over to jsfiddle:</p>
  
  <blockquote>
  <pre><code>      &lt;div class="tab-pane active" id="institutional"&gt;
         &lt;div class="accordion" id="accordion2"&gt;
          {foreach name=loop from=$institutional item=film}
          &lt;div class="accordion-group"&gt;
            &lt;div class="accordion-heading"&gt;
              &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" data-target="#{$film-&gt;url_key|escape}" href="#{$film-&gt;url_key|escape}"&gt;
                {$film-&gt;title()|escape} - 
                {$film-&gt;title_suffix()|escape}
              &lt;/a&gt;
            &lt;/div&gt;&lt;!-- /accordion-heading --&gt;
            &lt;div id="{$film-&gt;url_key|escape}" class="accordion-body collapse {if $smarty.foreach.loop.first} in{/if}"&gt;
              &lt;div class="accordion-inner"&gt;
  </code></pre>
  </blockquote>
  
  <p><a href="http://jsfiddle.net/dylanglockler/7qy8g/1/" rel="nofollow">http://jsfiddle.net/dylanglockler/7qy8g/1/</a></p>
  
  <p>----------UPDATE ------- figured it out but can't answer my own question because I don't 'have enough experience points' - didn't realize this is a game.</p>
  
  <p>I figured it out.. the id of my accordion content and the related data-target and href that pointed to it, were based off of film titles which are unique, but repeated within each accordion, albeit on separate tabs. Of course this made for non-unique ids. </p>
  
  <p>My fix is below, I added an _n (ie, _1) after the generated id for each of the three accordions:</p>
  
  <blockquote>
    <p>
              </p>
  </blockquote>
  
  <pre><code>       &lt;div class="accordion" id="accordion1"&gt;
          {foreach name=loop from=$home item=film}
          &lt;div class="accordion-group"&gt;
            &lt;div class="accordion-heading"&gt;
              &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" data-target="#{$film-&gt;url_key|escape}_1" href="#{$film-&gt;url_key|escape}_1"&gt;{$film-&gt;title()|escape} - {$film-&gt;title_suffix()|escape}&lt;/a&gt;
            &lt;/div&gt;&lt;!-- /accordion-heading --&gt;
            &lt;div id="{$film-&gt;url_key|escape}_1" class="accordion-body collapse {if $smarty.foreach.loop.first} in{/if}"&gt;
  </code></pre>