よくある質問ページの質問と回答をクリックで開閉する方法

よくある質問ページで「質問」が多すぎたり、自分の求めていない回答ばっかりだったりして読む気がなくなったことはありませんか？

シンプルに質問項目だけが並んでいて、自分の求めている回答だけを見られるように、質問をクリックすることでその回答が表示される方法をご紹介します。

このテクニックをjQueryのアコーディオンと言います。

デモ

質問をクリックしてみてください。

Q1. 質問

A1. 回答

Q2. 質問

A2. 回答

Q3. 質問

A3. 回答

HTML

<p class="question">Q1. 質問</p>
<p class="answer">A1. 回答</p>
<p class="question">Q2. 質問</p>
<p class="answer">A2. 回答</p>
<p class="question">Q3. 質問</p>
<p class="answer">A3. 回答</p>

質問項目のにquestionのクラスを、回答項目のにanswerのクラスを付加します。

※この時は「文章項目」のHTML編集モード、もしくは「ウィジェット/HTML」項目で直接記述してください。

CSS

p.question {
        cursor: pointer;
}
p.question:hover {
        text-decoration: underline;
}
p.answer {
        display: none;
        background: #f2f2f2;
        margin-left: 1em;
        padding: 10px;
}

テンプレートを利用されている場合

<header>内に<style>タグではさんで追記します。

管理メニュー > 基本設定 > ヘッダー編集

独自レイアウトを利用されている場合

CSS編集エリアにそのまま追記します。

管理メニュー > レイアウト > 独自レイアウト > CSS

js


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
　$("p.question").on("click", function() {
　　$(this).next().slideToggle(200);
　});
});
//]]>
</script>

<p class="question">〜</p>をクリックした時に、その次の要素が開閉する、という指定になっています。

※「.slideToggle()」の()の中身で、開閉の早さの指定ができます。任意の数値を入力できる他、"slow"や"fast"などの指定もできます

この仕組を使いたい該当ページの一番下に、ウィジェットでそのまま挿入します。

項目 > ウィジェット

もちらん、CSS同様に<header>に書いても問題ありません。

最後までお読みいただきありがとうございます！いかがでしたか？

このページが参考になったら、ぜひ左のボタンでFacebookかTwitterにシェアしていただけると嬉しいです！

押してくれたらもっとこうしんするぴ！