よくある質問っぽいののjQueryを使ったサンプル

2007年12月6日追記

IE6で選択中のタブの上が切れていたのを修正しました。
具体的にはcss/style.cssの35行目にfloat: left;を追加しております。

いろんなサイトで見かける「よくある質問」。
一番多いパターンは、リストで質問があって、アンカーで回答に飛ばす方法だと思うです。

特別ソレがいけてないとかは思わないんですが、飛んだ後に「戻るボタン」で戻らない人とかは、毎回ページトップ押したり、スクロールして戻ったりと案外手間だったりするわけです。

それならそういった手間が掛かるかも知れないことを少しでも省けないかしら？って事で、jQueryを使ってタブ型で折りたたまれたよくある質問っぽいサンプルを作ってみました。
（単純にボクがこのスタイルが一番見やすくて好きってだけだったり）

• サンプルページ
• サンプルダウンロード(Zip:20KB)
• メインのCSSファイル

（サンプルページの内容は適当ですので、あくまでも動きを見ていただければと思うです。）

使わせていただいた、JSは以下の3つです。

• jQuery
• jQuery_Auto
• RedLine Magazine : jQueryでリストを開閉させたい

一応サンプルのよくある質問部分に関しては、がっつり改行してたりそれなりに分かりやすくしてるつもりなんでソコソコ使いやすいかと思いますが、カスタマイズする際の参考にでもしていただければって事で、ご説明をするです。

---- こっから続き

まずは...

何はともあれhead要素内に、

<script src="./js/jquery.js" type="text/javascript"></script>
<script src="./js/qaTab.js" type="text/javascript"></script>

という感じでJSを読み込んであげます。

タブ部分に関して

タブ部分のご説明をするです。

使用しているJSは、jQuery_Auto 0.9 のタブ機能の部分。
タブ機能が使えるJSはいっぱいありますが、コレはclass名とか自由に決めれるし、（X）HTMLもかなりキレイなので個人的に気に入っております。

class名tabContainer 内にタブ機能が実装されるので、以下のようにdiv要素なりでタブにしたい部分を囲みます。

<div class="tabContainer">
 
<!-- この中がタブ -->
 
<!-- / .tabContainer --></div>

次に「タブ」部分のリストを作成します。カテゴリ名は画像でも、もちOK。

<div class="tabContainer">
<ul class="tabMenu">
<li id="qa01"><a href="#qa01_area" title="HappyLifeに関するご質問">HappyLife</a></li>
<li id="qa02"><a href="#qa02_area" title="HappyLifeの管理人に関するご質問">管理人</a></li>
<li id="qa03"><a href="#qa03_area" title="デジパに関するご質問">デジパ</a></li>
</ul>
<!-- / .tabContainer --></div>

ul要素には tabMenu ってクラス名を必ず付ける必要があります。
で、続いてli要素毎にidを付けます。
サンプルのid名は、qa01のようにして連番になってますが、お好きに付けて頂いてダイジョブです。

んで、アンカーの指定があるかと思いますが、ココはli要素につけた#id名 + _area と付けます。
qa01ってli要素にid名を付けたら #qa01_area となります。

続いてタブのコンテンツ部分を作成します。
こんな感じで↓

<dl id="qa01_area">
<dt></dt>
<dd></dd>
</dl>

今回のサンプルでは、dl要素にidを指定していますが、div要素とかブロックレベル要素でもOKです。

div要素にしたい場合は、以下のようにすると良いと思います。

<div id="qa01_area">
<dl>
<dt></dt>
<dd></dd>
</dl>
</div>

んで、当然ながらメニューと同じ数だけコンテンツを用意して上げます。

現在選択中のタブ

「タブ」ですから当然今どのタブなのかが分かるようにする必要があるので、コレはCSSで変えてあげます。
現在選択中のタブにはli要素に active ってクラスが付くので、選択状態って分かるようにしてあげます。

これで、とりあえずタブ部分は完了です。

多分、ココまで普通に作るとdd要素は隠れているのが分かるかと。

折りたたみ（アコーディオン）な部分

今回「RedLine Magazine」さんが作ってた、RedLine Magazine : jQueryでリストを開閉させたいをちょこっと変えたのを使わせてもらってます。

元のはh3要素クリックで、ul要素が開閉する感じのだったんですが、それをdt要素クリックで、dd要素が開閉するようにしてあります。
要素とかクラス名変えただけっていう...

それはさておき、この折りたたみは、div.tabContainer内のdt・dd要素のみに反映されます。
JSがまったく分からなくても、この辺りはソース見てみれば一発で分かるかと思います。

おわりに

このタイプのよくある質問を増やしたいと思ってるので、ぜひぜひ使ってやってください。
使いたいのにわかんねー！とか動かない！って人はご連絡ください。がんばて回答します。

もっかいダウンロードとサンプル

• サンプルページ
• サンプルダウンロード(Zip:20KB)
• メインのCSSファイル

実際のサイトでの使用例

• よくある質問｜digiper creators.net

上記ページでは質問の追加に、MTを使うことでさくさく追加できるようになってます。

あら、CSS HappyLifeなのにCSS部分の解説は一切無しですか。そうですか。（最近そういう記事が多い気がするのは気のせい。。。）

各種SBMに追加

• 
• 
• 
• 
• 
• 
•