[JS]フェードで表示・非表示するFAQコンテンツをシンプルなコードで実装するチュートリアル

jQueryを使って、FAQのAnswerをフェードで表示・非表示を切り替えるコンテンツをシンプルなコードで実装するチュートリアルを紹介します。

Code a Dynamic Questions & Answers FAQ Page with jQuery

• デモ
• 実装

デモ

FAQのデザインは、非常にシンプルです。
エフェクトはCSSに依存していないため、自由にデザインを変更して利用できます。

デモページ

Questionをホバーすると、ラインが表示され、

Questionホバー時

クリックすると、フェードでAnswerが表示されます。

Questionクリック時

実装

Step 1: 外部ファイル

「jquery.js」を外部ファイルとして記述します。

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Step 2: HTML

質問はh3要素、回答はp要素で実装し、div要素で内包します。

<div id="w">
<h2>User Accounts</h2>
<div class="q">
  <h3 class="qhead"><a href="#q01">よくある質問</a></h3>
  <div class="answer" id="q01"><p>回答</p></div>
</div>

<div class="q">
  <h3 class="qhead"><a href="#q02">よくある質問</a></h3>
  <div class="answer" id="q02"><p>回答</p></div>
</div>
</div>

Step 3: CSS

まずは、ベースとなるテキストのスタイルから。

/* typography */
h1 { font-family: 'Paprika', Tahoma, Arial, sans-serif; font-size: 2.65em; line-height: 1.55em; margin-bottom: 10px; font-weight: normal; color: #6c635e; }
h2 { font-size: 2.1em; line-height: 1.0em; font-weight: normal; font-style: italic; letter-spacing: 0.05em; color: #778657; margin-bottom: 2px; }
h3 { font-size: 1.45em; }

p { display: block; font-size: 1.4em; line-height: 1.4em; color: #656565; margin-bottom: 15px; }

a { color: #1565ba; text-decoration: none; }
a:hover { text-decoration: underline; } 

続いて、FAQの主要となるラッパーのdiv要素、質問と回答をスタイルします。
重要なポイントは回答を「display: none;」で非表示にしておきます。

#w { 
display: block; 
margin: 0 auto; 
padding: 18px 25px;
min-width: 400px; 
max-width: 900px; 
background: #fff; 
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px; 
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

/* question containers */
.q { display: block; max-width: 550px; margin-bottom: 16px; }

.qhead { margin-bottom: 3px; }
.qhead a:hover { text-decoration: none; color: #428ddc; border-bottom: 4px solid #c4d3ee; }

.answer { display: none; }

Step 4: JavaScript

最後に、jQueryと数行のコードを使って、フェードで開閉するエフェクトを記述します。

$(document).ready(function(){
  $(".qhead a").on("click", function(e){
    e.preventDefault();
    var href = $(this).attr("href");
    
    $(href).fadeToggle(450);
  });
});