言うこと聞かない bootstrap collapse 開いて閉じ・・開く

何故か、このサンプル通りすると
http://designup.jp/bootstrap3-collapse-194/

<!-- 
  data-toggle : Collapseを起動させる
  data-target : ここで指定したidとボタンを紐づける
-->
<button type="button" class="btn btn-default btn-sm" data-toggle="collapse" data-target="#demo">
  Collapse OPEN!
</button>

<!-- 
  .collapse : コンテンツを隠す
  .collapse.in : コンテンツを開いた状態にする
-->

<div id="demo" class="collapse">
  <h3>アコーディオンの中身</h3>
  <ul>
    <li>リスト１</li>
    <li>リスト２</li>
    <li>リスト３</li>
  </ul>
</div>

閉じるのターンのとき、三分の一だけ閉じて、すぐに開いてしまう・・・。

そもそも、GoogleMapsAPIとか、その他後付けモジュールが一杯なので、何の組み合わせが良くないとか、調べられませぬ。
困った。。。

同ページ下部にJavaScript制御の解あり。
取り敢えず、コレで回避したけど、Bootstrapとしては、ドノーマルで使うときは、こういうやり方は意図しないはず。
でも、こうしないとダメとは・・・

(´ﾍ｀；)ｳｰﾑ…