開閉式のFAQが簡単につくれる「SimpleFAQ」
当ページのリンクには広告が含まれています。
スポンサーリンク
開閉式のFAQ（よくある質問）が簡単につくれるjQueryプラグイン「SimpleFAQ」を紹介します。
jQueryプラグイン「SimpleFAQ」
jQueryプラグイン「SimpleFAQ」は、質問をクリックすると回答が表示される開閉式のFAQ（よくある質問）が簡単につくれるプラグインです。liタグだけで簡単に実装できます。html形式だけではなく、json形式にも対応しているので、こりゃまた便利です。
FAQって、「frequently asked questions」の略ですって、ふーん。知らんかった！
スポンサーリンク
html形式で作成したFAQののデモをご覧ください。「+」マーク（画像）が付いた質問をクリックすると回答がびよーんとアニメーション付きで表示されます。回答が表示されると質問は「-」マーク（画像）に変わりますので、もう一度質問をクリックすると回答が閉じます（非表示になります）。デモの質問と回答に特に意味はありません。
デモのソース（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
スポンサーリンク