今日の人気記事

まだデータがありません。

開閉式のFAQが簡単につくれる「SimpleFAQ」

当ページのリンクには広告が含まれています。

スポンサーリンク

開閉式のFAQ(よくある質問)が簡単につくれるjQueryプラグイン「SimpleFAQ」を紹介します。

jQueryプラグイン「SimpleFAQ」

jQueryプラグイン「SimpleFAQ」は、質問をクリックすると回答が表示される開閉式のFAQ(よくある質問)が簡単につくれるプラグインです。liタグだけで簡単に実装できます。html形式だけではなく、json形式にも対応しているので、こりゃまた便利です。

FAQって、「frequently asked questions」の略ですって、ふーん。知らんかった!

スポンサーリンク

html形式で作成したFAQののデモをご覧ください。「+」マーク(画像)が付いた質問をクリックすると回答がびよーんとアニメーション付きで表示されます。回答が表示されると質問は「-」マーク(画像)に変わりますので、もう一度質問をクリックすると回答が閉じます(非表示になります)。デモの質問と回答に特に意味はありません。

「SimpleFAQ」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>simpleFAQ - jQueryプラグインまとめのカルマ</title>
<link href="css/jquery.simpleFAQ.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
</head>
<body>
<ul id='faqList'>
  <li>
    <p class='question'>好きなドラゴンボールはどれですか?</p>
    <div class='answer'>
      <p>
        私は、三星球(サンシンチュウ)が大好きです。
      </p>
    </div>
  </li>
  <li>
    <p class='question'>一緒に旅行に行きたいドラゴンボールはどれですか?</p>
    <div class='answer'>
      <p>
        旅行に行くなら、六星球(リュウシンチュウ)です。
      </p>
    </div>
  </li>
  <li>
    <p class='question'>友達にあげたいドラゴンボールはどれですか?</p>
    <div class='answer'>
      <p>
        五星球(ウーシンチュウ)が喜ばれると思います。
      </p>
    </div>
  </li>
  <li>
    <p class='question'>ドラゴンボールで、くす玉はつくれますか?</p>
    <div class='answer'>
      <p>
        いいえ、ドラゴンボールでくす玉はつくれません。
      </p>
    </div>
  </li>
</ul>
<script>
$(function() {
  $('#faqList').simpleFAQ();
});
</script>
<script src="js/jquery.quicksilver.js"></script>
<script src="js/jquery.simpleFAQ.js"></script>
</body>
</html>

その他詳細はこちらからどうぞ。
» SimpleFAQ

スポンサーリンク

関連記事(一部広告含む)