HTMLとCSSだけでアコーディオンメニューを作る方法【初心者にもわかりやすく解説】

HTML

<div id="accordion">
    <input type="checkbox" id="menu1"><label for="menu1" class="menu_title">MENU1</label>
    <div class="accordion_content">メニュー1ダミーテキストメニュー1ダミーテキストメニュー1ダミーテキストメニュー1ダミーテキスト</div>
    <input type="checkbox" id="menu2"><label for="menu2" class="menu_title">MENU2</label>
    <div class="accordion_content">メニュー2ダミーテキストメニュー2ダミーテキストメニュー2ダミーテキストメニュー2ダミーテキスト</div>
    <input type="checkbox" id="menu3"><label for="menu3" class="menu_title">MENU3</label>
<div class="accordion_content">メニュー3ダミーテキストメニュー3ダミーテキストメニュー3ダミーテキストメニュー3ダミーテキスト</div>
</div>

CSS

#accordion{
    width:100%;
    max-width:300px;
    background:#e9e9e9;
    padding:10px;
}
/*項目名*/
label.menu_title{
    display:block;
    width:100%;
    background:#dd4000;
    color:#fff;
    font-weight:bold;
    border-radius:5px;
    text-align: center;
    margin:5px 0;
    padding:10px;
}
/*項目名の矢印アイコン*/
#accordion label::after{
    content:"\f103";
    font-family:"Font awesome 5 free";
    font-weight:bold;
    margin-left:5px;
}
/*項目名にカーソルをのせた時*/
label.menu_title:hover{
    cursor: pointer;
    background:#d40000;
    transition:ease-in .5s;
}
/*チェックボックスを非表示*/
#accordion input[type="checkbox"]{
    display:none;
}
/*開閉するコンテンツ*/
.accordion_content{
    height:0;
    background:#f9f9f9;
    opacity:0;
    transform:translateY(-50%) scaleY(0);
}
/*開いている時の項目名*/
#accordion input[type="checkbox"]:checked + label.menu_title{
    background:#d40000;
    margin-bottom:0;
}
/*開いている時の矢印アイコン*/
#accordion input[type="checkbox"]:checked + label.menu_title::after{
    content:"\f102";
    font-family:"Font awesome 5 free";
    font-weight:bold;
}
/*コンテンツを開く*/
#accordion input[type="checkbox"]:checked + label.menu_title + .accordion_content{
    height:auto;
    opacity:1;
    transform:translateY(0) scaleY(1);
    transition:ease .5s;
}

CSS

/*閉じているときのコンテンツ*/
.accordion_content{
    height:0;
    background:#f9f9f9;
    opacity:0;
    transform:translateY(-50%) scaleY(0);
}
/*開くときのコンテンツ*/
#accordion input[type="checkbox"]:checked + label.menu_title + .accordion_content{
    height:auto;
    opacity:1;
    transform:translateY(0) scaleY(1);
    transition:ease .5s;
}

CSS

/*閉じている時の矢印アイコン*/
#accordion label::after{
    content:"\f103";
    font-family:"Font awesome 5 free";
    font-weight:bold;
    margin-left:5px;
}
/*開いている時の矢印アイコン*/
#accordion input[type="checkbox"]:checked + label.menu_title::after{
    content:"\f102";
    font-family:"Font awesome 5 free";
    font-weight:bold;
}