scss アコーディオン：リスト型

Posted 2021-05-17

アコーディオン：リスト型
------------


A [Pen](https://codepen.io/anonie/pen/XWrzOWz) by [anonie](https://codepen.io/anonie) on [CodePen](https://codepen.io).

[License](https://codepen.io/anonie/pen/XWrzOWz/license).

<div class="inner">
	<div class="item01">
    <ul class="c-accordion">
      <dl class="c-accordion-item">
        <dt class="c-accordion-item__ttl">アコーディオンitem01-title<p class="c-accordion-item__arrow">＋</p></dt>
        <dd class="c-accordion-item__txt">
          ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
        </dd>
      </dl>
      <dl class="c-accordion-item">
        <dt class="c-accordion-item__ttl">アコーディオンitem01-title<p class="c-accordion-item__arrow">＋</p></dt>
        <dd class="c-accordion-item__txt">
          ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
        </dd>
      </dl>
    </ul>
  </div>
</div>
	

$(function(){
  $('.c-accordion-item').click(function(){
    if( $(this).hasClass('is_active') ) {
      $(this).removeClass('is_active'); 
      $(this).find('.c-accordion-item__arrow').text('＋');
    } else {
      $(this).addClass('is_active'); 
      $(this).find('.c-accordion-item__arrow').text('－');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

*, *::before, *::after {  box-sizing: border-box; }
body { background: #eee; }
.flex { display: flex; }
.inner {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
.inner { background: #fff; margin: 3rem auto; padding: 3rem 0;} // 視認性用

.item01 {  // 視認性用
	border: 3px solid #aaa;
}
.item02 {  // 視認性用
	border: 3px solid #ccc;
}
@mixin media($breakpoint) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

/// 以下モジュール ---------------------------------

.c-accordion {
  transition: 0.2s;
  &-item {
    margin-bottom: 1em; // 視認性用
    &__ttl {
      background: #eee; // 視認性用
    }
    &__ttl {
      position: relative;
      cursor: pointer;
    }
    &__txt {
      transition: .2s;
      display: none;
      .is_active & {
        display: block;
      }
    }
    &__arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 1em;
    }
  }
}