JSFiddle - React, Tailwind, and code Playground

by xxxvvvxxx

HTML

<div id="wrapper">
	<div class="panel-menu-container">
		<input type="checkbox" class="ccheck" id="country1"/>
		<label class="btn panel-menu-answer" for="country1">
			<div class="panel-menu-title">대한민국</div>
			<div class="sub">서울</div>
			<div class="sub">부산</div>
		</label>	
	</div>
	<div class="panel-menu-container">
		<input type="checkbox" class="ccheck" id="country2"/>
		<label class="btn panel-menu-answer" for="country2">
			<div class="panel-menu-title">미국</div>
			<div class="sub">시카고</div>
			<div class="sub">디트로이트</div>
		</label>	
	</div>
	<div class="panel-menu-container">
		<input type="checkbox" class="ccheck" id="country3"/>
		<label class="btn panel-menu-answer" for="country3">
			<div class="panel-menu-title">일본</div>
			<div class="sub">도쿄</div>
			<div class="sub">오사카</div>
		</label>	
	</div>
</div>

CSS

.ccheck {
	display:none;
}
.panel-menu-container {
	background:skyblue;
}
label.btn .sub {
	background:blue;
	color:white;
}
#country1 + label > div.sub {
	display:none;
}
#country1:checked + label > div.sub {
	display:block;
}
#country2 + label > div.sub {
	display:none;
}
#country2:checked + label > div.sub {
	display:block;
}
#country3 + label > div.sub {
	display:none;
}
#country3:checked + label > div.sub {
	display:block;
}