最近、「クリックするとビローンって開いて」という感じで、アコーディオンパネルの依頼が続けてありまして。
その際、ある程度使い回しが聞くように作れないかなぁ。と思いまして、いろいろ考えた結果、辿り着いたアコーディオンスクリプトです。
よくあるやつなので、保存して自分自身で持っておくといいと思いますよ。
目次
用意するもの
jQuery本体
jQueryの本体が必要になります。
jQuery公式サイトからダウンロードしてサーバーに設置するか、CDNを使ってjQueryを読み込みましょう。
個人的にはGoogleのCDNを使ってjQuery読み込みつつ、もし読み込めなかったらローカルのを読むようにしています。
JSファイル
用意するというか、これから作るんですけどね。
簡単なHTMLを用意します。
<dl class="panel"> <dt>ここ押すと開く</dt> <dd>ハイ開いたよ</dd> </dl>
これに対して
jQuery(function(){ jQuery(".panel dd").hide(); jQuery(".panel dt").on("click", function() { jQuery(this).next().slideToggle("normal"); }); });
と書いてあげて、panel.jsとかで保存。
HTML側で読み込んであげると、アコーディオンの完成です。
まとめ
clickにonいるのかいらないのか、よくわかってませんでしたが、とりあえずつけておいて損はなさそうな感じですかね。
jQuery の on() と off() を理解する – tacamy.blog
CSSで要素を隠す(display: none;)するのもみかけますが、cssでやってしまうとJSオフ環境で何も表示されないので、個人的にJSで非表示にしています。
ほんとに簡単なので、一度覚えておく、もしくはコピペしてローカルに持っておくと便利ですよ。
こういった何度も使いそうな小技的をまとめておくとホント便利なので、本来であれば仕事の合間にでもまとめておけばいいんでしょうが…
いや、これからはきちんとまとめて作業効率アップに繋げないといけませんね。
そいぎ~