<div class="c-accordion">
	<label>
		<div class="c-accordion__label">First</div>
		<input  type="checkbox">
		<div class="c-accordion__body">
		<span>Body first</span>
		<ul>
			<li>A</li>
			<li>B</li>
			<li>C</li>
			<li>D</li>
		</ul>
	</div>
	</label>
	
	<label>
		<div class="c-accordion__label">Second</div>	
		<input type="checkbox">
		<div class="c-accordion__body">
		<span>Body Second</span>
		<ul>
			<li>E</li>
			<li>F</li>
			<li>G</li>
		</ul>
	</div>
	</label>
</div>
.c-accordion {
	transition: all .6s ease-in-out;
	
	&__label {
		border-top: 3px solid #14213d;
		cursor: pointer;
		display: block;
		padding: .5rem;
		color: black;
		background-color: #e5e5e5;
		margin-bottom: .5rem;
		font-family: sans-serif;
		font-weight: bold;
		
		&:hover {
			background-color: #fca311;
			color: white;
		}
	}
	
	input {
		display: none;
		
		&:checked + .c-accordion__body {
			opacity: 1;
			height: auto;
			padding: .5rem;
		}
	}
	
	&__body {
		opacity: 0;
		height: 0;
		padding: 0;
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.