エイチデザイン / アコーディオン

アコーディオン

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

CODE
DEMO

説明
使い方
解説

準備中

[.accMod]に[open]classを入れておくと初期表示可能

準備中

ライブラリを導入する前に

html
```
  タイトル
  文章
```

css

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

jQuery

$('.accMod').each(function(){
  $('.accMod-head',this).append('');
  if($(this).hasClass('open')){$('.accMod-body',this).show();}
});

$bd.on('click','.accMod-head',function(){
  var $papa = $(this).parents('.accMod');
  var $accBody = $papa.children('.accMod-body');

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

タイトル: 初期非表示: 文章

タイトル: 初期表示: 文章

TOP

html

css

jQuery