【jQuery】アコーディオンを設置する手順を解説

プログラミング学習のメモです。

あとから自分で見返せるようにまとめています。

この記事で説明していること

アコーディオンの設置方法と手順

対象をクリックして、隠していたカテゴリを表示させる　( + を – に変更）

表示したカテゴリを再度隠す　( – を + に変更）

設置までの概要

隠しておく対象をCSS [ display:none; ] を用いて非表示にする
(複数カテゴリある場合は、それぞれに同じ名前のクラスを指定)
【jQuery】クリックイベントの設置
変数　var を定義し、answerクラスを$(this)で抽出して代入　（今回は”$answer”）
【JavaScript】if文を用いて、条件文を（”hasClass”を用いて指定クラスを持っているか）に設定する
持っている（true）の場合→クラスを外して非表示、textメゾットで”＋”に変更
持っていない場合（false）の場合→クラスを与えて表示、textメゾットで”ー”に変更

実際のコード

script.js

$(‘.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(‘-‘);
}
});