title: Collapsed Bootstrap accordion panels expanding outside DIV when opened
body: <p>I'm using the accordion featured as part of the BizStrap responsive website theme. The default for this is the bottom panel is open.</p>
  
  <p>The settings for the accordion are as per the template, other than setting the class and height so that all panels are closed:</p>
  
  <pre><code>&lt;a href="#collapseOne" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle collapsed"&gt;
  Panel title&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="accordion-body collapse" id="collapseOne" style="height: 0px;"&gt;
  &lt;div class="accordion-inner"&gt;
  </code></pre>
  
  <p>The development  <a href="http://www.asam.edu.au/2013/site/industry_conferences_young_leaders.html" rel="nofollow">page is here.</a> </p>
  
  <p>I also tried to have set it up with the first panel open. The problem in that instance is when the panels below the top one are opened, the top panel remains open and the content from the second panel extends outside of the container DIV. Strangely if I clicked on the top panel first, and then the ones below the Accordion functioned correctly. The class for this is 'accordion-toggle e' and the height set to 'auto'. The development <a href="http://www.asam.edu.au/2013/site/programs_aamc.html" rel="nofollow">page is here.</a></p>
  
  <p>I've not set up accordions using Bootstrap and am having a tough time getting my head around it. If anyone has any pointers in helping me achieve either of these results I'd really appreciate it!!!</p>