アコーディオン機能とは

＋ボタンを押したらアコーディオンが開いてテキストを表示させ、ーボタンを押したらアコーディオンが閉じる。主に質問コーナーなどに多い。

アコーディオンの流れ

①答えの部分はCSSで非表示にします。

②3つの質問部分には同一のclass名を付与し、

③それらのclickイベントを作ります。

質問をクリックした時に、対応する答えを隠すのか表示するのかを判断するため、下図のようにopenというclassを用います。

答えの表示中はopenをつけ、非表示中は外します。

hasClassメソッド

引数に指定したクラスを、オブジェクトが持っているか判定するときに使用します。

オブジェクトがそのクラスを持っていればtrue、持っていなければfalseを返します。

答えの表示・非表示は以下のようにif文を用いて行います。

質問をクリックした時に、$('.answer')がすでにopenクラスを持っていれば、（質問の答えが現在表示されていると判断できるので）openクラスを外し、答えを隠します。

openクラスがない場合はその逆です。

slideUp・slideDownメソッド

答えが表示されている時は非表示にするためにslideUpメソッドを用いて隠し、

質問の右にある「-」記号は「+」記号に書き換えます。

答えを表示させるときは、slideDownメソッドで表示し、「+」記号は「-」に書き換えましょう。

htnlファイル

<h3 class="question">Progateの公式キャラクターはなんですか？</h3>

<p>にんじゃわんこといいます。忍者の格好をしたわんこです。ネコではありません。</p>

</div>

</li>

<h3 class="question">にんじゃわんこはオスですか？それともメスですか？</h3>

<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(“-“);

}

});

});

jQuery アコーディオンの作成方法

jQuery　アコーディオンの作成方法