twitter-bootstrap - モーダルバギーでのTwitterブートストラップの崩壊

Question

モーダル ダイアログ内で折りたたみを使用しようとしています。私のページでは、モーダルと折りたたみの外側に、モーダル ダイアログと折りたたみの特定のセクションを開くために、リッスンするリンクをいくつか配置したいと考えています。各コンポーネントは、組み合わせて使用​​しない場合でもうまく機能するようです。ドキュメントのマークアップを使用し、折りたたみをモーダルに組み合わせたjsfiddleを次に示します。特定の折りたたみをトリガーして開くまで、折りたたみの機能は壊れません。

マークアップ:

<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Button to trigger modal -->
<a id="showCollapseOne" href="#myModal" role="button" class="btn">show collapseOne</a>

<!-- Button to trigger modal -->
<a id="showCollapseTwo" href="#myModal" role="button" class="btn">show collapseTwo</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>

        <!-- ACCORDION -->

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>

        <!-- END ACCORDION -->

    </p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

JS:

$('#showCollapseOne').on('click', function(){
    $('#myModal').modal('show');
    $('#collapseOne').collapse({toggle: true, parent: '#accordion2'});
});
$('#showCollapseTwo').on('click', function(){
    $('#myModal').modal('show');
    $('#collapseTwo').collapse({toggle: true, parent: '#accordion2'});
});

これを機能させる方法はありますか？