ボタンをクリックするだけで、コンテンツを非表示にしたり、表示したいときに折畳みが便利です：
<ul class="accordion" data-accordion>
<li
class="accordion-navigation">
<a href="#demo">Simple
Collapsible</a>
<div id="demo" class="content">
Lorem ipsum dolor sit amet....
</div>
</li>
</ul>
<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
結果：
.accordion クラスと data-accordion 属性は、折畳む要素を表しています。
.accordion-navigation クラスは、折畳む要素をスタイルします。
ボタンのクリックで表示または非表示になる実際のコンテンツは、
.content class (<div class="content") で指定します。
折畳むコンテンツを制御（表示/非表示）するには、リスト項目内に <a> 要素を追加します。
次に、同じ id を使用して、アンカーに折畳む要素を接続します (<a href=#demo" に <div id="demo" を接続)。
注: 折畳みを動作させるためには、foundation JS を初期化します。
デフォルトでは、折畳みコンテンツは非表示になります。
<div> に .active クラスを追加します：
アコーディオンは、論理的セクションに分けられる伸長と折畳みに使用する要素です。
アコーディオンを作成するためには、異った id へのリンクのアンカーを持つ複数のリストアイテムを追加します：
<ul class="accordion" data-accordion>
<li
class="accordion-navigation">
<a href="#demo">Accordion
1</a>
<div id="demo" class="content active">
Demo 1 - Lorem ipsum dolor sit amet....
</div>
</li>
<li class="accordion-navigation">
<a
href="#demo2">Accordion 2</a>
<div id="demo2"
class="content">
Demo 2 - Lorem ipsum
dolor sit amet....
</div>
</li>
<li class="accordion-navigation">
<a href="#demo3">Accordion
3</a>
<div id="demo3" class="content">
Demo 3 - Lorem ipsum dolor sit amet....
</div>
</li>
</ul>
結果：
デフォルトでは、アコーディオンの項目が１度にオープンされるのは１つです。
他を閉じないで、全てをオープンおよびクローズする機能が必要な場合は、data-options="multi_expand:true;" 属性を
追加します：
<ul class="accordion" data-accordion
data-options="multi_expand:true;">
..
</ul>
結果：