このエントリーをはてなブックマークに追加

jQuery tutorial: fancy FAQs

■jQueryを使ったFAQの表示

質問項目のみ表示され、質問項目をクリックすると回答項目がスライドされて表示されます。
再度質問項目をクリックすると非表示になります。
質問・回答項目の先頭には、QとAのグラフィックが自動で表示されます。
使い方次第でFAQ意外にも色々使えそうな気がします。

使用例)

どういう効果で表示されますか
質問項目のみ表示され、質問項目をクリックすると回答項目がスライドされて表示されます。
再度質問項目をクリックすると非表示になります。
質問・回答項目の先頭には、FとQのグラフィックが自動で表示されます。
ここに質問内容2
ここに回答内容2
ここに質問内容3
ここに回答内容3

■jQuaryバージョン

  1.3.2 サンプルHTML内のjQueryバージョン
  1.4.0 動作確認バージョン

■自ページへの導入

◆必要ファイルのコピー

DLしたファイルを解凍しfaqsフォルダ下の"scripts"フォルダと"images"フォルダを、サーバーにコピーする。
"scripts"フォルダ
"images"フォルダ
index.html
sample.html
 

◆キャラクターセット

<head>タグ内でキャラクターセットを指定する。
DLしたサンプルHTMLではキャラクターセットが"charset=iso-8859-1"となっていますが、これでは日本語は文字化けするので"UTF-8"や"Shift_JIS"等に変更して日本語が表示されるようにして下さい。
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 

◆外部スクリプト

<head>タグ内で外部スクリプトを読み込む。
jquery.min.js jQuaryの本体
utility.js FAQの本体
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/utility.js"></script>
 

◆CSS

サンプルから抜粋したCSSです。
CSSファイルにするかHTML本体に実装してください。
p,dl{
    line-height:        170%;
    margin-bottom:      10px
}
dl,dt,dd{
    padding:            0;
    margin:             0;
}
.faqs{
    padding-top:        20px;
}
.faqs dt{
    font-weight:        bold;
    background:         url(images/q.gif) 0 4px no-repeat;
    padding:            3px 0 10px 30px;
    position:           relative;
}
.faqs dt:hover{
    cursor:             pointer;
}
.faqs dd{
    background:         url(images/a.gif) 0 2px no-repeat;
    padding:            0 0 10px 30px;
    position:           relative;
    color:              #333;
}
.faqs .hover{
    color:              #990000;
    text-decoration:    underline;
}
 

◆HTMLへの実装

<dl class="faqs"></dl>で括られた範囲がFAQ表示されます。
<dt></dt>タグ内に質問内容を記述します。
<dd></dd>タグ内に回答内容を記述します。
<dl class="faqs">
  <dt>ここに質問内容1</dt>
  <dd>ここに回答内容1</dd>
  <dt>ここに質問内容2</dt>
  <dd>ここに回答内容2</dd>
  <dt>ここに質問内容3</dt>
  <dd>ここに回答内容3</dd>
</dl>