簡単にFAQを作れるJavaScript「jQuery Simple FAQ」

サイトにはFAQページは必須となりつつあります。
検索機能もつけたFAQをjQuery Simple FAQで簡単に作りましょう。

使用方法

jQuery Simple FAQからファイル一式をダウンロードします。
またjQueryからjquery.jsをダウンロードします。

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.quicksilver.js"></script>
<script type="text/javascript" src="jquery.simpleFAQ-0.1.js"></script>
<link rel="stylesheet" type="text/css" href="simpleFAQ.css" media="all" />
<script>
$(document).ready(function() {
	$('ul#faqList').simpleFAQ({
	  showOnlyOne: true,
	  allowSearch: true,
	  searchNode: '#faqSearch',
	  minSearchScore: 0.5,
	  sortSearch: true
	});
});
</script>
上記を記述したら、FAQ部分を以下のように記述すれば完成です。

<div id="searchFaq">
  <div id="faqSearch"></div>
  <ul id="faqList">
    //　ここから一つのQ&Aです
    <li>
      <p class="question">お悩みですか？</p>
      <div class="answer">
        <p>
          人生山あり谷あり。<br />
          あまり気にせず、マイペースでいきましょう。
        </p>
        <p class="tags">タグ1, タグ2</p>
      </div>
    </li>
    //　ここまで一つのQ&Aです
　　//　Q&Aの数だけ繰り返してください。
 </ul>
</div>

サンプル

Javascriptサンプルページ一覧
skuare.net