title: Bootstrap accordion only auto-collapsing one panel
body: <p>I've been scratching my head on this for the past 2 hours.  I have an accordion with two panels.  I want the first panel to be expanded by default.  When the collapsed panel's header is clicked, I want that panel to expand and the other to collapse.  It only works in certain situations for the second panel.</p>
  
  <p>Here is a <a href="http://jsfiddle.net/47n94/" rel="nofollow">JSFiddle</a>.</p>
  
  <p>Here is my markup:</p>
  
  <pre><code>&lt;div id="proposalAccordian" class="panel-group"&gt;
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;
              &lt;h4 class="panel-title"&gt;
                  &lt;a data-toggle="collapse" data-parent="#proposalAccordian" href="#collapseContact"&gt;Contact&lt;/a&gt;
              &lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id="collapseContact" class="panel-collapse collapse in"&gt;
              &lt;div class="panel-body"&gt;
                  @Html.Partial("_ContactPanel")
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;
              &lt;h4 class="panel-title"&gt;
                  &lt;a data-toggle="collapse" data-parent="#proposalAccordion" href="#collapseProposal"&gt;Proposal&lt;/a&gt;
              &lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id="collapseProposal" class="panel-collapse collapse"&gt;
              &lt;div class="panel-body"&gt;
                  @Html.Partial("_ProposalPanel")
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm using Bootstrap v3.1.1 and jQuery v1.10.4.</p>