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;
            }
        });
});
  • コーダーのための計算機