Bootstrapでアコーディオン（Collapse / accordion）表示

Bootstrapを利用して、簡単にアコーディオンのような折りたたみ表示をすることができます。
デモはこちら

FAQのページや、ナビゲーション・メニューを作成するときなどに役立ちます。Aipo.comサイトのヘルプでもこちらを利用しています。

CSS

<link href="bootstrap.css" rel="stylesheet" type="text/css">

Javascript

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>

HTML

<div class="accordion-group">
  <div class="accordion-heading"><a class="accordion-toggle" data-toggle="collapse" data-parent="#faq" href="#faqpost_1">タイトル1</a></div>
  <div id="faqpost_1" class="accordion-body collapse">
    <div class="accordion-inner">
      <p>本文1</p>
    </div>
  </div>
</div>
<div class="accordion-group">
  <div class="accordion-heading"><a class="accordion-toggle" data-toggle="collapse" data-parent="#faq" href="#faqpost_2">タイトル2</a></div>
  <div id="faqpost_2" class="accordion-body collapse">
    <div class="accordion-inner">
      <p>本文2</p>
    </div>
  </div>
</div>