Accordion

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

詳しい導入事例は導入方法を参照してください。

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

DEMO
初期表示
ネスト

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

初期表示: 表示内容

親ネスト: 全て非表示

子ネスト

孫ネスト: 表示内容

親ネスト: 親を初期表示

子ネスト

孫ネスト: 表示内容

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

子ネスト

孫ネスト: 表示内容

使い方

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

初期表示

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

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

HTML
CSS
Script

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

$('.mod_acc').each(function(){
  $(this).children('.mod_acc-head').append('<button class="mod_acc-btn"><i class="ico-mui"></i></button>');
  if($(this).hasClass('open')){$(this).children('.mod_acc-body').show();}
});
$bd.on('click','.mod_acc-head',function(){
  let $papa = $(this).closest('.mod_acc');
  let $accBody = $papa.children('.mod_acc-body');

  $papa.toggleClass('open');
  if($accBody.is(':hidden')){
    $accBody.slideDown('normal');
  } else {
    $accBody.slideUp('normal');
  }
});