[JS]ユーザビリティに配慮したアコーディオンを実装するチュートリアル

ユーザビリティに配慮しつつ、jQueryのバグにも対応したシンプルなアコーディオンを実装するチュートリアルをSoh Tanakaから紹介します。

デモのキャプチャ

Simple Accordion w/ CSS and jQuery
デモページ

アコーディオンのロジックは下記の通りです。

  1. 最初にデフォルトの設定します。
    一番目のアコーディオンを開いて、アクティブな状態にします。
  2. クリックをすると。
    クリックされたアコーディオンのアイテムは開くのか閉じるのか判定します。
  3. 「hidden」(閉じた状態)のアイテムをクリックすると、
  4. 全てのアイテムから「active」を取り去り、閉じます。
  5. クリックされたアイテムは「active」になり、すぐにスライドダウンして開きます。

ロジックのイメージは、下記のようになります。

実装のイメージ

実装のイメージ

.

HTML

アコーディオンのアイテムはシンプルに実装されており、h2要素とdiv要素から成っています。

CSS

CSSで注意を払うべき重要なポイントは二つです。

  1. 「.acc_container」で指定している、アイテムの幅は固定幅にしています(%やemではありません)。これはjQueryのバグにスライドする際にジャンプしたりスキップするのを防ぎます。
  2. ネストしているdiv要素の「.acc_container .block」にpaddingを指定しています。これは開いたり閉じたりするアニメーションでのバグを防ぎます。

JavaScript

スクリプトのベースにはjQueryを使用し、下記のスクリプトを記述します。

スクリプトがオフの時は、各エレメントが成り行きで配置されます。

デモのキャプチャ

スクリプトがオフの時のキャプチャ

sponsors

top of page

©2018 coliss