3のカルーセル機能を試してみましたが、今回はCollapse(カラプス/折りたたみ)機能を試してみます。作業の前提条件は、下記のとおりです。jquery-1.10.2.min.jsを指定して、HTMLを作成します。23行目で、panel-groupクラスを定義してIDにaccordion1を指定します。27行目で、data-toggle属性にcollapseを指定し、data-parent属性でpanel-groupのIDを指定し、anchorタグを定義します。32行目で、折りたたむデータを定義します。collapseクラスと一緒にinクラスを指定すると、データが表示された状態になります。27行目で定義したanchorのIDも合わせて定義します。</body></html>ページを表示すると、アコーディオン形式でデータが表示されます。デモは、024-1.htmlからご覧頂けます。ファイルは、024-1.zipからダウンロードできます。コード表示への応用ここまでは、Collapseのサンプルそのものなので、Collapse機能をコード表示に応用します。比較対象として、先に作成した014-1.htmlをcollapse:trueを指定して表示します。</body></html>ページを表示すると、SyntaxHighLighterとCollapse形式で表示されます。デモは、024-2.htmlからご覧頂けます。ファイルは、024-2.zipからダウンロードできます。