FAQで使えるCSSで作るアコーディオンメニュー

2分でできる！

jQueryを使わないアコーディオンメニューの作り方

<input id="acdCheck1" class="acdCheck" type="checkbox">
<label class="acdLabel" for="acdCheck1">クリックで開く1</label>
<div class="acdContent">
	<p>hello.world!</p>
</div>

.acdCheck{
	display: none;
}
.acdLabel{
    background: #000;
    color: #fff;
    display: block;
    margin-bottom: 1px;
    padding: 10px;
	position: relative;
}
.acdContent{
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: .5s;
    visibility: hidden;
}
.acdCheck:checked + .acdLabel + .acdContent{
    height: auto;
    opacity: 1;
    padding: 10px;
    visibility: visible;
}

/*------- 矢印＞ --------*/
.acdLabel::after{
    content: '';
    width: 8px;
    height: 8px;
    margin-top: -5px;
    border-top: solid 1px #FFF;
    border-right: solid 1px #FFF;
    transform: rotate(135deg);
    position: absolute;
    top: 45%;
    right: 1.8rem;
}

.acdCheck:checked + .acdLabel::after{ 
	top: 55%;
	transform: rotate(-45deg);
}