デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

【jQuery実践講座】アコーディオンパネルの実装

accordion_eyecatch
jQueryでアコーディオンパネルの作り方を紹介します。
【更新情報】2020年2月1日動画解説を追加しました。それに伴い、記事の内容も一部変更しました。

スポンサーリンク

動画解説

動画による解説です。記事内容と合わせて参考にしてみてください!

アコーディオンパネルとは?

アコーディオンパネルとは、ラベルをクリックすると隠れていたパネル(ラベルの内容が書かれた部分)が、スライドしながら表示されるUIです。ポータルサイトのように、情報量に対して表示できるスペースが少ない場合に重宝します。

【紹介】作成したアコーディオンパネル暗記ツール

昔、資格試験の勉強時に、アコーディオンパネルで単語帳的なアプリを作りました。
以下のようにキーワードが書かれたラベルをクリックすると、その中の説明が表示されます。
もう一度ラベルをクリックすると説明が非表示になります。
このように、アコーディオンパネルを使えば、単語帳的なWebアプリも作れます。

accordion_panel

↓以下アコーディオンパネルを作成したサイトのリンク
例:中小企業診断士 2次知識整理ツール

アコーディオンパネルを実装する

早速、実装方法をご紹介します。
以下で練習用素材をダウンロードできますので、ダウンロードして試してみてください。

まずは、アコーディオンパネルの下地を作ります。
練習用素材のindex.htmlを開き、mainタグ内に、
ラベル部をdt要素、パネル部(隠したい部分)をdd要素で追加していきます。
dt/ddはアコーディオンパネルで表示したいパネル数分だけ繰り返します。

次に、CSSでパネルの表示レイアウトを指定します。
練習素材のstyle.cssを開いて、以下を追記します。
パネルの表示・非表示は、jQuery側で操作します。

最後にjQueryでパネルの表示・非表示する制御を実装します。
練習素材のmy_script.jsを開き、以下の様に実装しましょう。

4行目は、パネル部分(dd要素)を全て非表示で初期化しています。
6行目は、クリックされたラベル部分(dt要素)に隣接するパネル部分(dd要素)が非表示の場合は、パネル部分(dd要素)をスライドダウンしてパネルを表示させています。
11行目のelse内は、クリックされたラベル部分(dt要素)に隣接するパネル部分(dd要素)が表示中の場合は、パネル部分(dd要素)をスライドアップしてパネルを非表示にしています。

これで、シンプルなアコーディオンパネルが完成です。

最後に

以上、アコーディオンパネルの実装方法をご紹介しました。
少しでも参考になれば幸いです。

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で
関連記事(一部広告含む)

飲食店用WordPress無料テーマ
「InomaRestaurantBasic」

飲食店用の無料WordPressテーマを作成しました。
店のコンセプト、メニュー、アクセスなど
飲食店に必要な最低限の機能を搭載しました。
これから飲食店のホームページを開設したい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン