Latest web development tutorials

財団は、リストを折りたたみます

あなたはディスプレイの一部を非表示にするときは、リストを折りたたむことができます。

例

<ULクラス= "アコーディオン"データ -accordion>
<李クラス= "アコーディオンナビゲーション ">
<AのHREF = "#demo">シンプルな折りたたみ</ A>
<DIVのID = "デモ"クラス = "コンテンツ">
このチュートリアル - 科学技術だけでなく、夢だけではありません！ ！ ！
</ DIV>
</李>
</ UL>

<！ -初期化財団JS - >
<スクリプト>
$（ドキュメント）.ready（関数（）{
$（ドキュメント）.foundation（）;
}）
</スクリプト>

»をお試しください

分析の例

.accordionクラスとdata-accordion属性は、折り畳み可能な要素を作成するために使用されます。 .accordion-navigation折りたたみ可能な要素の描画に使用されるクラス。 実際のコンテンツの.contentクラス（の<divクラス= "コンテンツ" ）のいずれかを表示するボタンをクリックします。

私たちは、リスト項目に追加<a>要素を制御する（表示/非表示）折りたたみ可能。 次に、同じコンテンツID（<a href=#demo"与<divid="demo">関連）と折りたたみ可能なコンテンツにリンクを固定。

注：折りたたみ効果は財団JSを初期化する必要があります。

デフォルトでは、折りたたみ可能なコンテンツが非表示になります。 私たち缶内<div>前.activeクラスは、表示をデフォルトに許可されています。

例

<DIVのID = "デモ"クラス = "コンテンツアクティブ">

»をお試しください

アコーディオン効果

拡張のためのアコーディオン効果と折りたたみ可能なコンテンツを設定します。

リンクを作成するために、異なるアンカーとidを複数使用して、アコーディオン効果：

例

<ULクラス= "アコーディオン"データ -accordion>
<李クラス= "アコーディオンナビゲーション ">
<Aの HREF = "#demo">アコーディオンインスタンス1 </ A>
<DIVのID = "デモ"クラス = "コンテンツアクティブ">
デモ1 - チュートリアル - 科学技術だけでなく、夢だけではありません！ ！ ！
</ DIV>
</李>
<李クラス= "アコーディオンナビゲーション ">
<A HREF = "# demo2">アコーディオンインスタンス2 </ A>
<DIVのID = "DEMO2"クラス = "コンテンツ">
デモ2 - Loremのイプサムの悲しみはAMET座ります....
</ DIV>
</李>
<李クラス= "アコーディオンナビゲーション ">
<A HREF = "# demo3">アコーディオンインスタンス3 </ A>
<DIVのID = "demo3"クラス = "コンテンツ">
デモ3 - チュートリアル - 科学技術だけでなく、夢だけではありません！ ！ ！
</ DIV>
</李>
</ UL>

»をお試しください

デフォルトでは、アコーディオンは、リスト項目が開いているされています。 閉じたい場合は、すべてを使用できdata-options="multi_expand:true;" ; "プロパティを：

例

<ULクラス= "アコーディオン"データ -accordionデータ・オプション= "multi_expand：真;">
..
</ UL>

»をお試しください