CSSとjQueryで作るアコーディオンボタン
クリックすると中身が出てくるアコーディオンボタン。
可変すると周知するために最初の一つは開けています。
一応開いた状態の要素に.activeをつけています。
See the Pen 171004 by M.Ueda (@nekuta) on CodePen.
js(jQuery)
$(function () {
var guide_li = $('.guide_list>li');
var guide_li_inner = $('.guide_list>li .guide_content');
var guide_li_first = $('.guide_list>li:first-child .guide_ttl_wrap');
var guide_li_inner_first = $('.guide_list>li:first-child .guide_content');
var guide_ttl_wrap = $('.guide_ttl_wrap');
guide_li_inner.hide();
guide_li_inner_first.show();
guide_li.removeClass('active');
guide_li_first.addClass('active');
guide_ttl_wrap.on('click', function () {
//もしguide_ttl_wrapにactiveというclassがあったら
if ($(this).hasClass('active')) {
$(this).removeClass('active');
// .next()は直後の兄弟要素を取得します
$(this).next('.guide_content').slideUp(500); return false;
} else {
//なかったら
$(this).addClass('active');
$(this).next('.guide_content').slideDown(500);
return false;
}
});
});
