<div class="sc-spoiler">
<div class="sc-spoiler-title"><span class="sc-spoiler-icon"></span>スポイラーの確認スポイラーの確認スポイラーの確認スポイラーの確認スポイラーの確認スポイラーの確認スポイラーの確認</div><div class="sc-spoiler-contents">
<div>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</div></div>
</div>
body {
	font-family: sans-serif;
	max-width: 600px;
	width: 90%;
	margin: 0 auto;
	margin-top: 30px;
	line-height: 1.6;
}
	
.sc-spoiler {
  .sc-spoiler-title {
    font-weight: bold;
    border: solid 1px lightgray;
    padding: 10px 0;
    margin: 10px 0;
    display: flex;
    cursor : pointer;
    &:before {
      content:"+";
      flex-basis: 20px;
      padding: 0 10px;
    }
    &:after {
      content:"";
      flex-basis: 10px;
    }
  }
  .sc-spoiler-contents {
    transition: ease .5s;
    opacity: 0;
    height: 0;
    div {
      display: none;
    }
  }
}
.sc-spoiler-show {
  .sc-spoiler-title {
    &:before {
      content:"−";
    }
  }
  .sc-spoiler-contents {
    transition: ease .5s;
    margin-top: 0px;
    padding: 20px 0;
    opacity: 1;
    height: auto;
    div {
      display: block;
    }
  }
}
function sc_spoilers() {

  $('.sc-spoiler').click(function(){
    $(this).toggleClass('sc-spoiler-show');
  });
}

sc_spoilers();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js