アコーディオン機能とは
＋ボタンを押したらアコーディオンが開いてテキストを表示させ、ーボタンを押したらアコーディオンが閉じる。主に質問コーナーなどに多い。
アコーディオンの流れ
①答えの部分はCSSで非表示にします。
②3つの質問部分には同一のclass名を付与し、
③それらのclickイベントを作ります。
質問をクリックした時に、対応する答えを隠すのか表示するのかを判断するため、下図のようにopenというclassを用います。
答えの表示中はopenをつけ、非表示中は外します。
hasClassメソッド
引数に指定したクラスを、オブジェクトが持っているか判定するときに使用します。
オブジェクトがそのクラスを持っていればtrue、持っていなければfalseを返します。
答えの表示・非表示は以下のようにif文を用いて行います。
質問をクリックした時に、$('.answer')がすでにopenクラスを持っていれば、（質問の答えが現在表示されていると判断できるので）openクラスを外し、答えを隠します。
openクラスがない場合はその逆です。
slideUp・slideDownメソッド
答えが表示されている時は非表示にするためにslideUpメソッドを用いて隠し、
質問の右にある「-」記号は「+」記号に書き換えます。
答えを表示させるときは、slideDownメソッドで表示し、「+」記号は「-」に書き換えましょう。
htnlファイル
<ul id="faq-list">
<li class="faq-list-item">
<h3 class="question">Progateの公式キャラクターはなんですか？</h3>
<span>+</span>
<div class="answer">
<p>にんじゃわんこといいます。忍者の格好をしたわんこです。ネコではありません。</p>
</div>
</li>
<li class="faq-list-item">
<h3 class="question">にんじゃわんこはオスですか？それともメスですか？</h3>
<span>+</span>
<div class="answer">
<p>にんじゃわんこはオスです。</p>
</div>
</li>
CSSファイル
.faq-list-item {
margin:10px;
border-bottom:1px solid #ccc;
position:relative;
cursor:pointer;
text-align: left;
}
.faq-list-item h3 {
font-size: 14px;
}
.faq-list-item span {
position:absolute;
top:0;
right:5px;
color:#ccc;
font-size:13px;
}
.answer {
font-size: 12px;
padding: 5px 0px;
margin-bottom: 15px;
/* displayプロパティをnoneにしてください */
display: none;
}
JSファイル
// FAQのアコーディオン
$('.faq-list-item').click(function() {
var $answer = $(this).find('.answer');
if($answer.hasClass('open')) {
$answer.removeClass('open');
$answer.slideUp();
$(this).find('span').text("+");
} else {
$answer.addClass('open');
$answer.slideDown();
$(this).find('span').text(“-“);
}
});
});
