【jQuery実践講座】アコーディオンパネルの実装
jQueryでアコーディオンパネルの作り方を紹介します。
【更新情報】2020年2月1日動画解説を追加しました。それに伴い、記事の内容も一部変更しました。
動画解説
動画による解説です。記事内容と合わせて参考にしてみてください！
アコーディオンパネルとは？
アコーディオンパネルとは、ラベルをクリックすると隠れていたパネル（ラベルの内容が書かれた部分）が、スライドしながら表示されるUIです。ポータルサイトのように、情報量に対して表示できるスペースが少ない場合に重宝します。
【紹介】作成したアコーディオンパネル暗記ツール
昔、資格試験の勉強時に、アコーディオンパネルで単語帳的なアプリを作りました。
以下のようにキーワードが書かれたラベルをクリックすると、その中の説明が表示されます。
もう一度ラベルをクリックすると説明が非表示になります。
このように、アコーディオンパネルを使えば、単語帳的なWebアプリも作れます。
↓以下アコーディオンパネルを作成したサイトのリンク
例：中小企業診断士 2次知識整理ツール
アコーディオンパネルを実装する
早速、実装方法をご紹介します。
以下で練習用素材をダウンロードできますので、ダウンロードして試してみてください。
まずは、アコーディオンパネルの下地を作ります。
練習用素材のindex.htmlを開き、mainタグ内に、
ラベル部をdt要素、パネル部（隠したい部分）をdd要素で追加していきます。
dt/ddはアコーディオンパネルで表示したいパネル数分だけ繰り返します。
<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側で操作します。
/* アコーディオンパネル */
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要素）をスライドアップしてパネルを非表示にしています。
$(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');
}
});
});
これで、シンプルなアコーディオンパネルが完成です。
最後に
以上、アコーディオンパネルの実装方法をご紹介しました。
少しでも参考になれば幸いです。
