このブログでは、ネイティブのjavascriptを使って、アコーディオンを作ってみます。 jQuery のようなライブラリは必要ありません。 JQueryUIにはアコーディオンコンポーネントが組み込まれており、これを使用するのは素晴らしいことです。 しかし、責任ある開発者として、純粋なjavascriptで作成する方法も知っておく必要があります。
コンポーネントを小さなステップに分解してみましょう。
- アコーディオンはパネルのリストを含みます。
- すべてのパネルのヘッダーコンポーネントは常に表示されます。
- パネルは展開または折りたたむことができます。
- 一度に展開できるパネルは1つだけです。
- 他のパネルが展開されると、最後のパネルのボディコンポーネントは隠れます。
小さなステップでコンポーネントを構築してみましょう。
Step 1 :- Design basic HTML
ヘッダー&ボディを持つパネルのリストを作成するいくつかの基本的なhtmlを作成しましょう。 各パネルはヘッダーとボディーのアイテムを持っています。
Step2 :-可視性を処理するためにいくつかのCSSを定義する
本体の可視性を定義するために2つのCSSクラスを作成しましょう。 ここで、一度に拡張された要素のみを表示する必要があります。
Step3 :- HTML で CSS を使用する
HTML に CSS を追加した後、コードは次のようになります:
今、すべてのパネルのボディは最初のものを除いて非表示になっています。 基本的なアコーディオンコンポーネントを作成しました。
Step4 :- クリックイベントの追加
各パネルにクリックイベントを追加し、パネルの可視性を変更します。
JS Fiddleリンクはこちら
initAccordion 関数はアコーディオンコンポーネントを初期化するために定義されています。 これは、各パネルにクリックイベントを配置します。 パネルがクリックされると、現在のアクティブなパネルからアクティブなクラスを削除し、新しいパネルに追加します。 デフォルトでは、最初のパネルがアクティブになります。 showPanel 関数に panel 要素を渡すことで、どのパネルもデフォルトでアクティブにすることができます。 これはアコーディオンの非常に基本的なモデルですが、主な機能をカバーしています。
素敵なCSSスタイル、アニメーション、アイコンを追加することで、より派手なものにすることができます。 また、イベント委任 & を実装し、現在のアクティブな要素をキャッシュすることで、よりパフォーマンス指向にすることができます。 イベントの詳細については、イベントに関する私のブログを参照してください。