Issue with collapse triggered by data-api vs js.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<p>This example illustrates a workaround for the discrepancy between managing collapsible elements using the data API and using JS.</p>

<div id="sidebar-panel" class="panel-group">
 <div class="panel">
  <div class="panel-heading">
   <div class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#sidebar-panel" href="#sb-nav-collapse">Panel A</a>
   </div>
  </div>
  <div id="sb-nav-collapse" data-parent="#sidebar-panel" class="panel-collapse collapse in">
   <div id="sb-nav" class="panel-body">
    <ul id="navlist" class="nav nav-list">
     <li class="inactive">Blah</li>
    </ul>
   </div>
  </div>
 </div>
 <div class="panel">
  <div class="panel-heading">
   <div class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#sidebar-panel" href="#sb-errors-collapse">Panel B</a>
   </div>
  </div>
  <div id="sb-errors-collapse" class="panel-collapse collapse" data-parent="#sidebar-panel">
   <div id="sb-errors" class="panel-body">
    <ul id="sb-errorlist" class="nav nav-list">
     <li class="inactive">Blah.</li>
    </ul>
   </div>
  </div>
 </div>
</div>
<button id="trigger">Trigger it programmatically.</button>

JavaScript

$(function () {
    $("#trigger").click(function () {
        $("a[href=#sb-errors-collapse]").click()
    });
});