jQueryで簡単にアコーディオンを実装する方法


最近、「クリックするとビローンって開いて」という感じで、アコーディオンパネルの依頼が続けてありまして。
その際、ある程度使い回しが聞くように作れないかなぁ。と思いまして、いろいろ考えた結果、辿り着いたアコーディオンスクリプトです。

よくあるやつなので、保存して自分自身で持っておくといいと思いますよ。

目次

  1. 用意するもの
  2. まとめ

用意するもの

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側で読み込んであげると、アコーディオンの完成です。

jQueryアコーディオンのサンプル

まとめ

clickにonいるのかいらないのか、よくわかってませんでしたが、とりあえずつけておいて損はなさそうな感じですかね。
jQuery の on() と off() を理解する – tacamy.blog

CSSで要素を隠す(display: none;)するのもみかけますが、cssでやってしまうとJSオフ環境で何も表示されないので、個人的にJSで非表示にしています。

ほんとに簡単なので、一度覚えておく、もしくはコピペしてローカルに持っておくと便利ですよ。
こういった何度も使いそうな小技的をまとめておくとホント便利なので、本来であれば仕事の合間にでもまとめておけばいいんでしょうが…

いや、これからはきちんとまとめて作業効率アップに繋げないといけませんね。
そいぎ~


コメントを残す

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

CAPTCHA