Accordion

クリックで表示非表示を切り替える機能

CSSに関しては一部CSSライブラリを採用しているので併用してください。

スライドで表示非表示を切り替えるアコーディオン機能。

DEMO
初期表示
ネスト

クリックで表示: 表示内容

初期表示: 表示内容

親ネスト: 全て非表示

子ネスト

孫ネスト: 表示内容

親ネスト: 親を初期表示

子ネスト

孫ネスト: 表示内容

親ネスト: 子ネストを初期表示

子ネスト

孫ネスト: 表示内容

使い方

トリガーとなる要素に+-.accMod-head-+のクラスを付与。
表示非表示を切り替える要素に+-.accMod-body-+クラスを付与。
上記2つを+-.accMod-+で包む。

初期表示

+-.accMod-+に+-open-+classを入れておくと初期表示可能。

ネストも可能。ネストした子要素を開いておくことも可能。

HTML
CSS
Script

.accMod-head ,
  .accMod-body {padding: 8px 24px;}
  .accMod-head {
    margin: 0 0 8px;
    border-bottom: 1px solid var(--line-main);;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
  }
  .accMod-btn .ico-mui::before {content: '\e313';}
  .accMod-btn .ico-mui {transition: 0.2s;}
  .accMod.open > .accMod-head .ico-mui {transform: rotate(180deg);}
  .accMod-body {display: none;}

$('.accMod').each(function(){
    $(this).children('.accMod-head').append('');
    if($(this).hasClass('open')){$(this).children('.accMod-body').show();}
  });
  
  $bd.on('click','.accMod-head',function(){
    let $papa = $(this).closest('.accMod');
    let $accBody = $papa.children('.accMod-body');
  
    $papa.toggleClass('open');
    if($accBody.is(':hidden')){
      $accBody.slideDown('normal');
    } else {
      $accBody.slideUp('normal');
    }
  });