scss アコーディオン：モバイル时のみ「続きを表示する」

Posted 2021-05-17

アコーディオン：モバイル時のみ「続きを表示する」
------------------------


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

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

<div class="inner">
	<div class="item01">
    <ul class="c-accordionM">
      <li class="c-accordionM-item">
				<div>
					<p class="c-accordionM-item__txt">
						テキストA
					</p>
					<p class="c-accordionM-item__txt">
					 テキストB
					</p>
					<div class="c-accordionM-item__trigger sp">
						<p class="c-accordionM-item__trigger__text">続きを表示する</p>
						<p class="c-accordionM-item__stts-icon">＋</p>
					</div>
				</div>
				<div>
					<p class="c-accordionM-item__txt --hide">
					 テキストB
					</p>
					<p class="c-accordionM-item__txt --hide">
						テキストC
					</p>
					<p class="c-accordionM-item__txt --hide">
						テキストD
					</p>
				</div>
			</li>

      <li class="c-accordionM-item">
        <p class="c-accordionM-item__txt">
					ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
				</p>
        <p class="c-accordionM-item__txt">
         ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
				</p>
				<p class="c-accordionM-item__txt --hide">
					隠す文章がここに入ります。隠す文章がここに入ります。隠す文章がここに入ります。隠す文章がここに入ります。隠す文章がここに入ります。隠す文章がここに入ります。
				</p>
				<p class="c-accordionM-item__txt --hide">
					隠す文章がここに入ります。隠す文章がここに入ります。隠す文章がここに入ります。隠す文章がここに入ります。隠す文章がここに入ります。
							<p class="c-accordionM-item__txt --hide">
					これも出てたら成功
					
				</p>		
				</p>
				<div class="c-accordionM-item__trigger sp">
					<p class="c-accordionM-item__trigger__text">続きを表示する</p>
					<p class="c-accordionM-item__stts-icon">＋</p>
				</div>
			</li>

    </ul>
  </div>
</div>
	

$(function(){
  $('.c-accordionM-item__trigger').click(function(){
		let $cAccordionMItem = $(this).closest('.c-accordionM-item');
    if( $cAccordionMItem.hasClass('is_active') ) {
      $cAccordionMItem.removeClass('is_active');
			$(this).find('.c-accordionM-item__trigger__text').text('続きを表示する');
      $(this).find('.c-accordionM-item__stts-icon').text('＋');
			$cAccordionMItem.find('.c-accordionM-item__txt.--hide').css('display', 'none');
    } else {
      $cAccordionMItem.addClass('is_active'); 
			$(this).find('.c-accordionM-item__trigger__text').text('続きを隠す');
      $(this).find('.c-accordionM-item__stts-icon').text('－');
			$cAccordionMItem.find('.c-accordionM-item__txt.--hide').css('display', 'block');
    }
  });
});

<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;
}
$breakpoints: (
	sp: "only screen and (max-width: 559px)",
	tb: "only screen and (min-width: 560px) and (max-width: 959px)",
	pc: "only screen and (min-width: 960px)"
);
@mixin media($breakpoint) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}
.pc {
  @include media(sp) {
    display: none !important;
  }
}
.sp {
  @include media(pc) {
    display: none !important;
  }
  @include media(tb) {
    display: none !important;
  }
}
/// 以下モジュール ---------------------------------

.c-accordionM {
  transition: 0.2s;
  &-item {
    margin-bottom: 1em; // 視認性用
    &__ttl {
      background: #eee; // 視認性用
    }
    &__ttl {
      position: relative;
      cursor: pointer;
    }
    &__txt {
      transition: .2s;
      .is_active & {
        display: block;
      }
			&.--hide {
				@include media(sp) {
					display: none;
				}
				// @media (max-width:767px) {
				// 	display: none;
				// }
			}
    }
		&__trigger {
			background: #eee; // 視認性用
			position: relative;
			&:hover {
				cursor: pointer;
			}
		}
    &__stts-icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 1em;
    }
  }
}