【jQuery実践講座】アコーディオンパネルの実装
jQueryでアコーディオンパネルの作り方を紹介します。
【更新情報】2020年2月1日動画解説を追加しました。それに伴い、記事の内容も一部変更しました。
動画解説
動画による解説です。記事内容と合わせて参考にしてみてください！
アコーディオンパネルとは？
アコーディオンパネルとは、ラベルをクリックすると隠れていたパネル（ラベルの内容が書かれた部分）が、スライドしながら表示されるUIです。ポータルサイトのように、情報量に対して表示できるスペースが少ない場合に重宝します。
【紹介】作成したアコーディオンパネル暗記ツール
昔、資格試験の勉強時に、アコーディオンパネルで単語帳的なアプリを作りました。
以下のようにキーワードが書かれたラベルをクリックすると、その中の説明が表示されます。
もう一度ラベルをクリックすると説明が非表示になります。
このように、アコーディオンパネルを使えば、単語帳的なWebアプリも作れます。
↓以下アコーディオンパネルを作成したサイトのリンク
例：中小企業診断士 2次知識整理ツール
アコーディオンパネルを実装する
早速、実装方法をご紹介します。
以下で練習用素材をダウンロードできますので、ダウンロードして試してみてください。
まずは、アコーディオンパネルの下地を作ります。
練習用素材のindex.htmlを開き、mainタグ内に、
ラベル部をdt要素、パネル部（隠したい部分）をdd要素で追加していきます。
dt/ddはアコーディオンパネルで表示したいパネル数分だけ繰り返します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<main> <dl> <dt> キーワード１ </dt> <dd><p> キーワード１の説明文 </p></dd> <dt> キーワード２ </dt> <dd><p> キーワード２の説明文。 </p></dd> <dt> キーワード３ </dt> <dd><p> キーワード３の説明文 </p></dd> </dl> </main> |
次に、CSSでパネルの表示レイアウトを指定します。
練習素材のstyle.cssを開いて、以下を追記します。
パネルの表示・非表示は、jQuery側で操作します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
/* アコーディオンパネル */ dt { line-height: 35px; /* 行間 */ height: 35px; font-size: large; text-indent: 1em; /* インデント幅 */ font-weight: bold; color: white; background-color: rgb(0, 65, 144); border-bottom: 1px solid white; } dd { margin: 0; background: #D4D0C8; } dd p { margin: 0; padding: 20px; } dt:hover { background-color: rgb(0, 153, 217); cursor:pointer; /* マウスカーソル形状:リンクカーソル */ } dt.selected{ background-color: rgb(230, 46, 139); } |
最後にjQueryでパネルの表示・非表示する制御を実装します。
練習素材のmy_script.jsを開き、以下の様に実装しましょう。
4行目は、パネル部分（dd要素）を全て非表示で初期化しています。
6行目は、クリックされたラベル部分（dt要素）に隣接するパネル部分（dd要素）が非表示の場合は、パネル部分（dd要素）をスライドダウンしてパネルを表示させています。
11行目のelse内は、クリックされたラベル部分（dt要素）に隣接するパネル部分（dd要素）が表示中の場合は、パネル部分（dd要素）をスライドアップしてパネルを非表示にしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(function(){ // アコーディオンパネル $('dd').css('display', 'none'); // dd要素を非表示にする $('dl dt').click(function(){ // dt要素がクリックされた時 if($('+dd',this).css('display')=='none'){ // クリックされたdt要素の隣接要素（dd)が非表示ならば、スライドダウン $('+dd',this).slideDown('slow'); $(this).addClass('selected'); } else { // クリックされたdt要素の隣接要素(dd)が表示中ならば、スライドアップ $('+dd',this).slideUp('slow'); $(this).removeClass('selected'); } }); }); |
これで、シンプルなアコーディオンパネルが完成です。
最後に
以上、アコーディオンパネルの実装方法をご紹介しました。
少しでも参考になれば幸いです。
スポンサーリンク
