【コピペＯＫ】Ｑ＆Ａアコーディオンの作成方法

 <div class="faq">
        <dl>
            <input id="qa1" type="checkbox">
            <label for="qa1">
                <dt>
                    <span>Q</span>
                    タイトル１
                </dt>
            </label>
            <dd>
                <span>A</span>
                内容１
            </dd>
        </dl>
    
        <dl>
            <input id="qa2" type="checkbox">
            <label for="qa2">
                <dt>
                    <span>Q</span>
                    タイトル２
                </dt>
            </label>
            <dd>
                <span>A</span>
                内容２
            </dd>
        </dl>
    
        <dl>
            <input id="qa3" type="checkbox">
            <label for="qa3">
                <dt>
                    <span>Q</span>
                    タイトル３
                </dt>
            </label>
            <dd>
                <span>A</span>
                内容３
            </dd>
        </dl>
    </div>

.faq{
    max-width: 800px;
    margin: 0 auto;
}

.faq dl,
.faq dt,
.faq dd {
margin: 0;
padding: 0;
}

.faq dl+dl {
margin-top: 1rem;
}

.faq dt,
.faq dd {
padding: 10px;
}

.faq dl {
position: relative;
overflow: hidden;
}

.faq dl>input {
display: none;
}

.faq dt {
position: relative;
z-index: 1;
padding-right: 40px;
padding-left: 2.5em;
cursor: pointer;
background: #e6f3ff;
transition: .4;
}

.faq dd {
position: absolute;
visibility: hidden;
transform: translateY(-100%);
transition: .4s;
background: #f0f8ff;
border-top: none;
padding-left: 2.5em;

}

.faq dl>input:checked+label+dd {
position: relative;
visibility: visible;
transform: translateY(0);
}

.faq dt::before {
content: '';
position: absolute;
width: 20px;
height: 3px;
top: 50%;
right: 10px;
background: #333;
transform: translateY(-50%);
}

.faq dt::after {
content: '';
position: absolute;
top: 50%;
right: 10px;
width: 20px;
height: 3px;
background: #333;
transition: .4s;
transform: translateY(-50%) rotate(90deg);
}

.faq dl>input:checked+label>dt::after {
transform: translateY(-50%) rotate(180deg);
}

.faq dt span,
.faq dd span {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: #459be6;
color: #fff;
top: 50%;
left: .5em;
width: 1.5em;
height: 1.5em;
transform: translateY(-50%);
}


.faq dd span {
top: 10px;
transform: translateY(0);
background-color: #e60000;