FAQ(Q&A)などでよくある、見出しをクリックしたらアコーディオン式に内容の表示/非表示を切り替えられるやり方をjQueryで実装したい

Q&Aなどのような、一覧でズラーと並べてしまうと見にくくなってしまうような場合、不必要な表示は隠しておきたい。そしてユーザがクリックするなどのアクションに従って表示させたい。そうした表示方法はいくつかあるだろうが、アコーディオン式の表示/非表示切り替えは比較的使いやすいのではないだろうか。

ということで、さっそく実装例を見てみたい。
一部CSSを使っているが、jQueryの実装上は関係がないので飛ばしてもらっても問題はない。単に実装例で見やすくなるようにしているだけである。

[html]
<dl id="faq" class="faq">
<dt class="faq_dt">Q1.コーヒーのおかわりはできますか?</dt>
<dd class="faq_dd">Ans. おかわり1杯につき100円の追加料金でご提供しております。</dd>
<dt class="faq_dt">Q2.ケーキセットのドリンクをブランデーに変更できますか?</dt>
<dd class="faq_dd">Ans. 申し訳ありません。ケーキセットのドリンクはノンアルコールに限ります。ご希望の場合には、別途ケーキ単品でご注文下さい。</dd>
</dl>
[/html]


ここではdl,dt,ddタグを使った、いわゆる定義リストを使用してアコーディオンを実装している。おそらく定義リストを使ったものが一般的ではないだろうか。他のタグを使ってもできなくはないと思うが、FAQのような場合は定義リストのほうが記述もイメージも容易だとは思う。
上記のHTMLを普通に表示した場合は、なんてことはない定義リストで表示される。
これを、あらかじめddタグは隠しておき、dtタグがクリックされた場合にddタグを表示し、表示されている場合にdtがクリックされたら非表示にするというようにjQueryで実装する。

以下のCSSはオプション的なものだ。適当に調整すればいいだろう。

[css]
.faq {
background-color: #cccccc;
font-size: 10pt;
padding: 5px 5px 5px 5px;
}
.faq_dt {
color: #000066;
font-weight: bold;
}
.faq_dd {
color: #006600;
padding-bottom: 1em;
font-weight: bold;
}
[/css]

jQueryの実装は以下の通り。

[javascript]
$(document).ready(function(){
$(‘dl#faq&gt;dd’).hide();
$(‘dl#faq&gt;dt’).click(function(){
$(this).toggleClass(‘opened’).nextUntil(‘dl#faq&gt;dt’).toggle(‘slow’);
});
$(‘dl#faq&gt;dt.opened’).nextUntil(‘dl#faq&gt;dt’).show(‘slow’);
});
[/javascript]

2行目で、まず最初にddタグを隠しておく。セレクタの意味は「id=faqのdlタグの直下にあるddタグ」という意味になる。

3~5目では、実際にクリックされた際の動作を規定している。
3行目はdtタグがクリックされた場合にイベントハンドラが呼ばれるようにしている。

4行目にはクリック時の具体的な動作を指定する。クリックされた要素(dtタグ)に、.toggleClass()メソッドでCSSクラスを追加/削除している。toggleという名前が示すとおり、なければ追加し、あれば削除するという動作をする。この場合、実際にCSSでopenedクラスの記述があってもなくても構わない。要素に対してCSSクラスを適用するかしないかだけがjQueryで実行される。もっと端的に言うと、.toggleClass()メソッドによって、dtタグに対して「class=”opened”」をつけたりはずしたりしているという動作をしていると思えばいい。
そのあと、.netUntil()メソッドで、クリックされたdtタグとペアになるddタグを選択している。
ここでの.nextUntil()メソッドの役割は何かというと、アコーディオンさせたい要素(タグ)を厳密に指定することだ。

具体的には、クリックされたdtタグ(タグとペアで含まれる)の次のタグ(すなわちddタグ)から、その次に登場するdtタグの間に存在する要素をくくりだしているのだ。.nextUntil()メソッドで指定されたセレクタは、そのセレクタの要素自身を含まない。そのため、クリックされたdtタグからその次のdtタグ、つまりddタグが抽出されるということになる。
これを日本語で書き出すと「CSSのopenedクラスを持ったdtタグとペア関係にあるddタグ」ということだ。この要素に対して.show()メソッドを適用している。オプションである「slow」はスロー表示をさせるための指定子だ。このslowをfastやミリ秒などで指定すると速度が変わる。

最後の6行目は、CSSクラスで「opened」というクラスが付与されたdtタグをセレクタで指定し、.nextUntil()メソッドでそのペアとなるddタグを抽出し、そこに対して.show()メソッドで表示するようにしている。
一見すると4行目と同じことをしているのだが、この行の役割はこうだ。
ページ読み込み時点ですでに「opened」CSSクラスがHTML中に記述されている場合など、すでにopenedクラスを持つタグがあった場合、これをあらかじめすべて表示させるということだ。
この行によって、HTML作成者が「あらかじめこの行の内容だけは表示させておきたい」と思ったときに、そのdtタグに「class=”opened”」さえ書いておけば、HTML読み込み時にすでに表示することになる。もちろんその後、その行をクリックすることで非表示にさせることもできる。その動作は4~6行目で保証される。

■Q&Aやメニューなどをアコーディオンで
http://zura.org/prog/js/accordion/

湘南貿易 デュック・ド・モンターニュ ノンアルコールワイン 750ml現場で役立つjQueryデザインパーツライブラリ実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」やさしくはじめるWebデザイナーのためのjQueryの学校10日でおぼえるjQuery入門教室 第2版TOMBO 独奏用アコーディオン グランデール GT-32 パッションレッドパール

コメントを残す

メールアドレスが公開されることはありません。