Issue with collapse triggered by data-api vs js.

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<p>This example illustrates a 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" 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">
   <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>
<button id="workaround">Workaround.</button>

JavaScript

$(function () {
    $("#trigger").click(function () {
        $("#sb-errors-collapse").collapse('show');
    });
    $("#workaround").click(function () {
        $("#sb-errors-collapse").collapse({parent: "#sidebar-panel"}).collapse('show');
    });
});