クリックやタップで開いたり閉じたりするFAQを実装する方法

jQueryを使ってクリックやタップで開いたり閉じたりするFAQを設置する方法をご紹介いたします。

動きについては、以下デモページをご参照いただければと思います。

デモページを見る

「質問の答えを見る」をクリックすると、テキストが「質問の答えを閉じる」に切り替わるようにしています。

クリックやタップで開いたり閉じたりするFAQをjQueryを使って実装する方法

HTMLのマークアップ

デモページでは、HTMLは以下のようにしています。

<div class="faq_wrapper content_inner">
 <div class="faq">
 <h2 style="text-align:center;">FAQ</h2>
 <div class="faq_cont">
 <div class="faq_text ibl">Q1.質問</div>
 <div class="faq_anser_click ibl">質問の答えを見る ></div>
 <p class="faq_anser">質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。</p>
 </div><!-- //.faq_cont -->
 <div class="faq_cont">
 <div class="faq_text ibl">Q2.質問</div>
 <div class="faq_anser_click ibl">質問の答えを見る ></div>
 <p class="faq_anser">質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。</p>
 </div><!-- //.faq_cont -->
 <div class="faq_cont">
 <div class="faq_text ibl">Q3.質問</div>
 <div class="faq_anser_click ibl">質問の答えを見る ></div>
 <p class="faq_anser">質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。</p>
 </div><!-- //.faq_cont -->
 <div class="faq_cont">
 <div class="faq_text ibl">Q4.質問</div>
 <div class="faq_anser_click ibl">質問の答えを見る ></div>
 <p class="faq_anser">質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。</p>
 </div><!-- //.faq_cont -->
 <div class="faq_cont">
 <div class="faq_text ibl">Q5.質問</div>
 <div class="faq_anser_click ibl">質問の答えを見る ></div>
 <p class="faq_anser">質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。</p>
 </div><!-- //.faq_cont -->
 <div class="faq_cont">
 <div class="faq_text ibl">Q6.質問</div>
 <div class="faq_anser_click ibl">質問の答えを見る ></div>
 <p class="faq_anser">質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。</p>
 </div><!-- //.faq_cont -->
 <div class="faq_cont">
 <div class="faq_text ibl">Q7.質問</div>
 <div class="faq_anser_click ibl">質問の答えを見る ></div>
 <p class="faq_anser">質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。</p>
 </div><!-- //.faq_cont -->
 <div class="faq_cont">
 <div class="faq_text ibl">Q8.質問</div>
 <div class="faq_anser_click ibl">質問の答えを見る ></div>
 <p class="faq_anser">質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。質問の答えです。</p>
 </div><!-- //.faq_cont -->
 </div><!-- //.faq -->
</div><!-- //.faq_wrapper -->

答えを表示(または非表示)する際クリックする部分に、.faq_anser_clickというクラスをつけています。クリックして開かれる答えの部分には、.faq_anserというクラスをつけます。

CSSでスタイルを調整

続いて、CSSでスタイルを調整していきます。デモページでは以下のようにしていますが、サイトに合わせて変更してください。

.faq{
 background: #f5f1eb;
 border-radius: 20px;
 padding: 40px 35px;
 margin: 50px auto;
 width: 70%;
}

.faq_cont{
 border-bottom: dashed 1px #a07d46;
 padding: 12px 0;
 position: relative;
 font-size: 21px;
 color: #a07d46;
}

.faq_anser_click,
.faq_anser_close{
 cursor: pointer;
 position: absolute;
 right: 0;
 text-decoration: underline;
}

.faq_anser{
 display: none;
}

.ibl{
 display: inline-block;
 vertical-align: middle;
}

ポイントとしては、.faq_anser_clickと.faq_anser_closeに「cursor: pointer;」を追加してマウスカーソルを変更している点と、.faq_anserを「display: none;」で予め非表示にしている点です。

jQueryの実装

jQueryは以下のようにします。

<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<!-- FAQ -->
<script>
$(document).ready(function(){
 var flg = "close";
 $('.faq_anser_click').click(function(){
 $(this).next('.faq_anser').stop(true, true).slideToggle();

 if(flg == "close"){
 $(this).text("質問の答えを閉じる ∨");
 flg = "open";
 }else{
 $(this).text("質問の答えを見る >");
 flg = "close";
 }
 });
}); 
</script>

「var flg = “close”;」で最初はフラグを閉じた状態に定義しておき、.faq_anser_clickをクリックする度に「flg = “open”;」と「flg = “close”;」を入れ替えて、答えを表示・非表示するとともにテキストも差し替えています。

あとがき

よくクリックで開くFAQを実装する方法は色んなブログで見かけますが、クリックする箇所のテキストを切り替える方法まではあまり見かけないので書いてみました。参考になれば幸いです。