アコーディオンパネルで暗記ツールを作ってみた
jQueryでアコーディオンパネルの暗記ツールを作ってみました。
備忘録として残しておきます。
アコーディオンパネルとは？
アコーディオンパネルとは、ラベルをクリックすると隠れていたパネル（ラベルの内容が書かれた部分）が、スライドしながら表示されるUIです。ポータルサイトのように、情報量に対して表示できるスペースが少ない場合に重宝します。
アコーディオンパネル暗記ツールの概要
資格試験で必要な知識をこのアコーディオンパネルに纏めて、暗記ツールとして活用することにしました。
以下のようにキーワードが書かれたラベルをクリックすると、その中の説明が表示されます。
もう一度ラベルをクリックすると説明が非表示になります。
説明を見なくても自分で説明できるまで繰り返し活用しようと思います。
↓以下アコーディオンパネルを作成したサイトのリンク
中小企業診断士 2次知識整理ツール
アコーディオンパネルを実装する
早速、実装方法をご紹介します。
まずは、アコーディオンパネルの下地を作ります。
以下のように、ラベル部をdt要素、パネル部をdd要素で囲みます。
dt/ddはアコーディオンパネルで表示したいパネル数分だけ繰り返します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<dl> <dt> キーワード１ </dt> <dd><p> キーワード１の説明文 </p></dd> <dt> キーワード２ </dt> <dd><p> キーワード２の説明文 </p></dd> </dl> |
次に、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 31 |
/* アコーディオンパネル */ dt { line-height: 35px; font-size: large; text-indent: 3em; font-weight: bold; color: white; height: 35px; background: url("images/background.jpg"); } dd{ margin: 0; background: #D4D0C8; } dd p{ margin: 0; padding: 20px; } dt.over{ background: url("images/background-over.jpg"); cursor:pointer; } dt.selected{ background: url("images/background_selected.jpg"); cursor: default; color: black; } |
最後にjQueryでパネルの表示・非表示する制御を実装します。
２行目は、パネル部分（dd要素）を全て非表示で初期化しています。
４行目は、クリックされたラベル部分（dt要素）に隣接するパネル部分（dd要素）が非表示の場合は、
パネル部分（dd要素）をスライドダウンしてパネルを表示させています。
8行目のelse内は、クリックされたラベル部分（dt要素）に隣接するパネル部分（dd要素）が表示中の場合は、
パネル部分（dd要素）をスライドアップしてパネルを非表示にしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
jQuery(function(){ jQuery("dd").css("display","none"); jQuery("dl dt").click(function(){ if(jQuery("+dd",this).css("display")=="none"){ jQuery("+dd",this).slideDown("slow"); jQuery(this).addClass("selected"); } else{ jQuery("+dd",this).slideUp("slow"); jQuery(this).removeClass("selected"); } }).mouseover(function(){ jQuery(this).addClass("over"); }).mouseout(function(){ jQuery(this).removeClass("over"); }); }); |
これで、シンプルなアコーディオンパネルが完成です。
最後に
以上、アコーディオンパネルを使用した暗記ツールの作成方法でした。
少しでも参考になれば幸いです。
スポンサーリンク
飲食店用WordPress無料テーマ「InomaRestaurantBasic」
飲食店用の無料WordPressテーマを作成しました。
店のコンセプト、メニュー、アクセスなど
飲食店に必要な最低限の機能を搭載しました。
これから飲食店のホームページを開設したい方、
この無料テーマを是非活用してみてください。
ブログ用WordPress無料テーマ「chameleon(カメレオン)」
WordPressテーマ（chameleon）は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。 初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください！
士業用WordPress無料テーマ「InomaExpertBasic」
士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。
