【jQuery】アコーディオン実装サンプル | 125naroom

もくじ

  1. アコーディオン、シンプル版
  2. アコーディオン、一つ開けると他は閉じる
  3. アコーディオン、一番目は開けておく
  4. アコーディオン、一番目は開けておく(一つ開けると他は閉じる)
  5. アコーディオンの閉じるボタンを複数作る
  6. アコーディオンの閉じるボタンを複数作る(一つ開けると他は閉じる)
  7. アコーディオンで多階層のメニューを作る
  8. アコーディオンのメニュー、横に並べる(一つ開けると他は閉じる)
  9. アコーディオン、横に開く(一つ開けると他は閉じる)
  10. アコーディオン、横に開く(一番目は開けておく、一つ開けると他は閉じる)

1. アコーディオン、シンプル版

アコーディオン、シンプル版

アコーディオンの中身です。

アコーディオン、シンプル版

アコーディオンの中身です。

アコーディオン、シンプル版

アコーディオンの中身です。

View the note

2. アコーディオン、一つ開けると他は閉じる

アコーディオン、一つ開けると他は閉じる

アコーディオンの中身です。

アコーディオン、一つ開けると他は閉じる

アコーディオンの中身です。

アコーディオン、一つ開けると他は閉じる

アコーディオンの中身です。

View the note

3. アコーディオン、一番目は開けておく

アコーディオン、一番目は開けておく

アコーディオンの中身です。

アコーディオン、二番目は閉じておく

アコーディオンの中身です。

アコーディオン、三番目は閉じておく

アコーディオンの中身です。

View the note

4. アコーディオン、一番目は開けておく(一つ開けると他は閉じる)

アコーディオン、一番目は開けておく

アコーディオンの中身です。一つ開けると他は閉じます。

アコーディオン、二番目は閉じておく

アコーディオンの中身です。一つ開けると他は閉じます。

アコーディオン、三番目は閉じておく

アコーディオンの中身です。一つ開けると他は閉じます。

View the note

5. アコーディオンの閉じるボタンを複数作る

アコーディオンの閉じるボタンを複数作る

ブラウザによって閉じるボタンを押したあとの挙動が違ったので閉じた後はスクロールして上部に戻るようにしました。アコーディオンの中の内容が多いときにおすすめです。内容が少ないときは閉じるボタンは不要かなと思います。

アコーディオンの閉じるボタンを複数作る

ブラウザによって閉じるボタンを押したあとの挙動が違ったので閉じた後はスクロールして上部に戻るようにしました。アコーディオンの中の内容が多いときにおすすめです。内容が少ないときは閉じるボタンは不要かなと思います。

アコーディオンの閉じるボタンを複数作る

ブラウザによって閉じるボタンを押したあとの挙動が違ったので閉じた後はスクロールして上部に戻るようにしました。アコーディオンの中の内容が多いときにおすすめです。内容が少ないときは閉じるボタンは不要かなと思います。

View the note

6. アコーディオンの閉じるボタンを複数作る(一つ開けると他は閉じる)

アコーディオンの閉じるボタンを複数作る

ブラウザによって閉じるボタンを押したあとの挙動が違ったので閉じた後はスクロールして上部に戻るようにしました。アコーディオンの中の内容が多いときにおすすめです。内容が少ないときは閉じるボタンは不要かなと思います。

一つ開けると他は閉じるバージョンです。

アコーディオンの閉じるボタンを複数作る

ブラウザによって閉じるボタンを押したあとの挙動が違ったので閉じた後はスクロールして上部に戻るようにしました。アコーディオンの中の内容が多いときにおすすめです。内容が少ないときは閉じるボタンは不要かなと思います。

一つ開けると他は閉じるバージョンです。

アコーディオンの閉じるボタンを複数作る

ブラウザによって閉じるボタンを押したあとの挙動が違ったので閉じた後はスクロールして上部に戻るようにしました。アコーディオンの中の内容が多いときにおすすめです。内容が少ないときは閉じるボタンは不要かなと思います。

一つ開けると他は閉じるバージョンです。

View the note

7. アコーディオンで多階層のメニューを作る

アコーディオンで多階層のメニューを作る
A
A_a
A_b
B
B_a
B_b
アコーディオンで多階層のメニューを作る
A
A_a
A_b
B
B_a
B_b
アコーディオンで多階層のメニューを作る
A
A_a
A_b
B
B_a
B_b

View the note

8. アコーディオンのメニュー、横に並べる(一つ開けると他は閉じる)

A
A_a
A_b
B
B_a
B_b
C
C_a
C_b

View the note

9. アコーディオン、横に開く(一つ開けると他は閉じる)

A

Aのテキストです。

B

Bのテキストです。

C

Cのテキストです。

View the note

10. アコーディオン、横に開く(一番目は開けておく、一つ開けると他は閉じる)

A

Aのテキストです。

B

Bのテキストです。

C

Cのテキストです。

View the note