アコーディオンメニューとは、WEBサイトでは、よくある質問（FAQ）などで、よく使われる。
例えば、初めは質問文の領域のみ表示し、その領域をクリックすれば、回答文を表示し、もう一度
質問文をクリックすれば閉じる動作をするアニメーションである。
①初めは上記の状態で、質問文（この例ではなぜ、あなたはフリーランスを目指しましたか）をクリックすれば
以下のような回答の文が質問文の下に表示される。
➁上記の状態で、質問文をクリックすれば、回答文は閉じられる
それでは、HTMLとCSSとJSの記述に行きます。
１）HTML
<section class="faq">
<div class="faq-inner">
<h2 class="section-title">よくある質問</h2>
<div class="section-title-en">FAQ</div>
<dl class="faq-container" >
<dt class="faq-question">なぜ、あなたはフリーランスを目指しましたか</dt>
<dd class="faq-answer" style="display: none;">
自分のIT経験を生かした仕事をしたいと思いまして、最初は転職を考えました。
しかし、50代後半で、年齢的に転職が難しいことと、60才以降も働きたい
ということで､フリーランスを目指しました｡
</dd>
<dt class="faq-question">ワイヤーフレームしかない状態で見つもりできますか</dt>
<dd class="faq-answer" style="display: none;">
ワイヤーフレームがわかっていればそこまで出来上がりと変化は無いと思うので、もちろんお見積もり可能です。
ただ、アニメーションの有無やワイヤーとかけ離れた部分があった際はご相談させていただきます。
</dd>
<dt class="faq-question">デザインカンプはPC版しか作成しないことが多いのですが大丈夫ですか</dt>
<dd class="faq-answer" style="display: none;">
はい、もちろん大丈夫です。SP版のデザインはよしなに対応させていただきます。
</dd>
</dl>
</div>
</section>２）CSS
.section-title {
font-size: 32px;
text-align: center;
}
.section-title-en {
text-align: center;
color: #3BA6C9;
}
.faq {
margin-top: 57px;
padding-bottom: 20px;
}
.faq-inner {
max-width: 907px;
margin: 0 auto;
}
.faq-question {
text-align: center;
font-size: 14px;
line-height: 1.85;
height: 60px;
padding-top: 20px;
border: 1px solid #e5e5e5;
font-weight: bold;
}
.faq-answer {
width: 900px;
font-size: 14px;
background-color: #F2F2F2;
height: 80px;
display: table-cell;
vertical-align: middle;
padding-left: 40px;
padding-right: 40px;
line-height: 1.85;
font-weight: bold;
}３）JS
$('.faq-question').on('click', function () {
$(this).next().slideToggle();
});
コメント