jQueryを使ったアコーディオン

アコーディオン開閉の基本パターン

見出しをクリック・タップすると開閉されます。

見出し(クリック・タップで開閉)1

アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。

見出し(クリック・タップで開閉)2

アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。

見出し(クリック・タップで開閉)3

アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。

見出し(クリック・タップで開閉)4

アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。

見出し(クリック・タップで開閉)5

アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。

アコーディオン開閉の基本パターン

見出しをクリック・タップすると開閉されます。

見出し(クリック・タップで開閉)※全てdivで記載

アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。

見出し(クリック・タップで開閉)※見出しはh2で記載

アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。

見出し(クリック・タップで開閉)※dl、dt、ddで記載
アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。

1つめだけは表示しておくパターン(cssでの設定)

見出しをクリック・タップすると開閉されます。

見出し(クリック・タップで開閉)1

アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。

見出し(クリック・タップで開閉)2

アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。

見出し(クリック・タップで開閉)3

アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。

見出し(クリック・タップで開閉)4

アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。

見出し(クリック・タップで開閉)5

アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。

1つめだけは表示しておくパターン(JavaScriptでの設定)

見出しをクリック・タップすると開閉されます。

見出し(クリック・タップで開閉)1

アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。

見出し(クリック・タップで開閉)2

アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。

見出し(クリック・タップで開閉)3

アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。

見出し(クリック・タップで開閉)4

アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。

見出し(クリック・タップで開閉)5

アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。

アコーディオンは1つしか開かないタイプ

見出しをクリック・タップすると開閉されます。

見出し(クリック・タップで開閉)1

アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。

見出し(クリック・タップで開閉)2

アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。

見出し(クリック・タップで開閉)3

アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。

見出し(クリック・タップで開閉)4

アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。

見出し(クリック・タップで開閉)5

アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。

実用向けに装飾を入れたアコーディオン

見出しをクリック・タップすると開閉されます。

見出し(クリック・タップで開閉)1

アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。

見出し(クリック・タップで開閉)2

アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。

見出し(クリック・タップで開閉)3

アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。

見出し(クリック・タップで開閉)4

アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。

見出し(クリック・タップで開閉)5

アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。アコーディオン用のコンテンツが入ります。


ブログ記事