CSSで作ったアコーディオン

CSSで作ったアコーディオン プラスマークver.CSSで作ったアコーディオン 矢印マークver.


<div class="css-accordion ac-plus">
	<input type="checkbox" id="faq001" class="ac-hidden"> // id名は項目ごとに一意
	<label for="faq001" class="ac-open"><span>Q</span>□□□□□□ □□□□□□ですか。</label>
	<label for="faq001" class="ac-close"><span>A</span>
		<p>□□□□□□□□□□□□□□□□ □□□□□□□□です。</p>
	</label>
</div>


/*====================================================
*	Accordion CSS ver.
====================================================*/
.css-accordion {
	width: 100%;
	}
.css-accordion label:hover{
	opacity: .6;
	}
.css-accordion .ac-hidden {
	display: none;
	}
.css-accordion .ac-open {
	display: block;
	position: relative;
	line-height:1.5;
	margin: 2px 0;
	padding: 1rem 5rem 1rem 6rem;
	cursor: pointer;
	background: #f8f3e6;
	}
.css-accordion .ac-close {
	display: block;
	position: relative;
	left: 0;
	line-height:1.3;
	padding: 0 0 0 6rem;
	height: 0;
	overflow: hidden;
	opacity: 0;
	transition: 0.5s;
	}
.css-accordion .ac-hidden:checked + .ac-open + .ac-close {
	opacity: 1;
	margin-bottom: 2rem;
	padding: 1rem 1rem 1rem 6rem ;
	height: auto;
	background: #f5f5f5;
	}
.css-accordion .ac-open span:nth-child(1),
.css-accordion .ac-close span:nth-child(1) {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 5rem;
	height: 100%;
	text-align: center;
	color: #fff;
	}

.css-accordion .ac-open span:nth-child(1) {
	background: #ee7836;
	}
.css-accordion .ac-close span:nth-child(1) {
	background: #ccc;
	}


/*-- Mark [+] --*/
.css-accordion.ac-plus .ac-open::before,
.css-accordion.ac-plus .ac-open::after {
	position: absolute;
	top: 50%;
	right: 3%;
	content: '';
	width: 20px;
	height: 2px;
	background: #000;
	transform: translateY(-50%);
	}
.css-accordion.ac-plus .ac-open::after {
	transform: translateY(-50%) rotate(90deg);
	transition: .5s;
	}
.css-accordion.ac-plus .ac-hidden:checked + .ac-open:after {
	transform: translateY(-50%) rotate(0);
	}


<div class="css-accordion ac-arrow">
	<input type="checkbox" id="faq001" class="ac-hidden"> // id名は項目ごとに一意
	<label for="faq001" class="ac-open"><span>Q</span>□□□□□□ □□□□□□ですか。</label>
	<label for="faq001" class="ac-close"><span>A</span>
		<p>□□□□□□□□□□□□□□□□ □□□□□□□□です。</p>
	</label>
</div>



※マーク以外のCSSは共通！

/*-- Mark [>] --*/
.css-accordion.ac-arrow .ac-open::after {
	position: absolute;
	top: 20%;
	right: 3%;
	content: '';
	width: 13px;
	height: 13px;
	border-top: 2px solid #333;
	border-right: 2px solid #333;
	background: none;
	transform: rotate(135deg)!important;
	transition: all .5s;
	}
.css-accordion.ac-arrow .ac-hidden:checked + .ac-open:after {
	transform: rotate(-45deg) !important;
	top: 35%;
	transition: .5s;
	}

TOP