HTML/CSS 2021.09.15

CSSだけで作るアコーディオンメニュー

誰が手がけたのがわからないようなすでにあるサイトの更新時に
「アコーディオンで開くコンテンツ追加してほしい」と言われjsは追加したくないけど実現させる、CSSだけでアコーディオンメニューが作れるコードです。

尚、以下コードはスマホの時にだけアコーディオンメニュー。
PC表示の際にはアコーディオンメニューなしのそのまま表示にしております。

&lt;div class="list_area">
   &lt;input id="acd_c" class="acd_check" type="checkbox">
    &lt;label class="acd_label" for="acd_c">クリックすると開きます&lt;/label>
    &lt;div class="acd_content">
        &lt;ul>
            &lt;li>aaaa&lt;/li>
            &lt;li>aaaa&lt;/li>
            &lt;li>aaaa&lt;/li>
        &lt;/ul>
    &lt;/div>
&lt;/div>

<label class="acd_label" for="acd_c">クリックすると開きます</label>

<ul>

</ul>

</div>

.acd_check{
      display: none;
}
.acd_label{
    border:1px solid #333;
    background-color: #efefef;
    color: #333;
    display: block;
    margin-bottom: 1px;
    padding: 10px;
}
.acd_content{
    max-height: 0;
    opacity: 0;
    transition-property: opacity, max-height;
    transition-duration: 0.5s;
}
.acd_check:checked + .acd_label + .acd_content{
      max-height: 2000px;
      opacity: 1;
      visibility: visible;
}

@media screen and (min-width: 980px){
    .acd_content{
      max-height: unset;
      opacity: 1;
      visibility:visible;
    }
    .acd_check:checked + .acd_label + .acd_content{
      max-height:unset;
      padding: 0;
    }
    .acd_label{
        display: none;
    }
}

.acd_check{

display: none;

}

.acd_label{

border:1px solid #333;

background-color: #efefef;

color: #333;

display: block;

margin-bottom: 1px;

padding: 10px;

}

.acd_content{

max-height: 0;

opacity: 0;

transition-property: opacity, max-height;

transition-duration: 0.5s;

}

.acd_check:checked + .acd_label + .acd_content{

max-height: 2000px;

opacity: 1;

visibility: visible;

}

@media screen and (min-width: 980px){

.acd_content{

max-height: unset;

opacity: 1;

visibility:visible;

}

.acd_check:checked + .acd_label + .acd_content{

max-height:unset;

padding: 0;

}

.acd_label{

display: none;

}

ふわっと開いて、ふわっと閉じます。