Cacher is the code snippet organizer for pro developers

<div class="inner">
	<div class="item01">
		<label class="c-check-inner">
			<input type="checkbox" id="js-check-trigger" class="c-check-item">
			item01item01item01item01item01item01item01ああああああ
		</label>
	</div>

	<div id="js-check-body" class="js-check-body item02">
	アイテム２アイテム２アイテム２アイテム２アイテム２アイテム２アイテム２アイテム２アイテム２アイテム２アイテム２アイテム２アイテム２アイテム２アイテム２
	</div>
</div>

$(function(){

// typeA
// $('input#js-check-trigger').change(function(){
// 	let jsCheck = $(this).prop('checked');
// 	if( jsCheck ) {
// 		$('#js-check-body').slideDown();
// 	} else {
// 		$('#js-check-body').slideUp();
// 	}
// });

//typeB
$('#js-check-trigger').click(function() {
	$("#js-check-body").slideToggle(this.checked);
});
  
  

	
});

<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 (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;
  }
}
/// 以下モジュール ---------------------------------

//https://copypet.jp/774/

.item01 {
			padding: 1rem; // 視認用
	font-size: 20px; // 視認用
}
.js-check-body {
	display: none;
}
.c-check {
	&-inner {
		position: relative;
		cursor: pointer;
		display: flex;
		align-items: center;
	}
	&-item {
		position: relative;
		margin: 0; // チェックボックス周囲のマージンをリセット
		margin-right: 1rem;
		cursor: pointer;
		&:before {
			content: '';
			position: absolute;
			z-index: 1;
			top: 50%;
			left: 0.5rem;
			width: 1rem;
			height: 0.5rem;
			-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
			transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
			-webkit-transform: rotate(-45deg) scale(0, 0);
			transform-origin: left top;
			transform: rotate(-45deg) scale(0, 0) translateY(-50%);
			border: 2px solid #da3c41;
			border-top-style: none;
			border-right-style: none;
		}
		&:checked:before {
			-webkit-transform: rotate(-45deg) scale(1, 1);
			transform: rotate(-45deg) scale(1, 1) translateY(-50%);
		}
		&:after {
			content: '';
			position: absolute;
			top: 40%;
			left: 0;
			width: 1.25rem;
			height: 1.25rem;
			transform: translateY(-50%);
			cursor: pointer;
			border: 2px solid #aaa;
			background: #ffffff;
		}
	}
}

@charset "UTF-8";

// htmlサンプル -----------------------------
// <div class="project">
// 	<label class="c-check">
// 		<input type="checkbox" class="c-check-item">
// 		item01item01item01item01item01item01item01ああああああ
// 	</label>
// </div>
// --------------------------------------
.c-check {
	position: relative;
	cursor: pointer;
	display: flex;
	align-items: center;
	&-item {
		position: relative;
		margin: 0;
		margin-right: 1rem; // project設定
		cursor: pointer;
		&:before {
			content: '';
			position: absolute;
			z-index: 1;
			top: 50%;
			left: 0.5rem;
			width: 1rem;
			height: 0.5rem;
			-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
			transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
			-webkit-transform: rotate(-45deg) scale(0, 0);
			transform-origin: left top;
			transform: rotate(-45deg) scale(0, 0) translateY(-50%);
			border: 2px solid #da3c41; // project設定
			border-top-style: none;
			border-right-style: none;
		}
		&:checked:before {
			-webkit-transform: rotate(-45deg) scale(1, 1);
			transform: rotate(-45deg) scale(1, 1) translateY(-50%);
		}
		&:after {
			content: '';
			position: absolute;
			top: 40%; // project設定
			left: 0;
			width: 1.25rem; // project設定
			height: 1.25rem; // project設定
			transform: translateY(-50%);
			cursor: pointer;
			border: 2px solid #aaa; // project設定
			background: #ffffff; // project設定
		}
	}
}

//  js用スタイル
.js-check-body {
	display: none;
}