【css】grid-template-rowsを使用して、ヌルっと！アコーディオンメニューを実装【javascript】
grid-template-rowsを使用して実装。transitionでヌルっと動きます。
1.htmlを記述する
<div id="acc-wrap">
<button id="acc-toggle-btn">アコーディオンメニュー</button>
<div id="acc-detail">
<div>
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
</div>
</div>
</div>
2.cssを記述する
#acc-wrap > #acc-toggle-btn{
position: relative;
display: inline-block;
height: 40px;
padding: 0 40px 0 0.75rem;
font-weight: bold;
color: #ffffff;
cursor: pointer;
background: #333333;
border: 2px solid #333333;
border-radius: 4px;
}
#acc-wrap > #acc-toggle-btn::after{
position: absolute;
right: 8px;
bottom: 14px;
display: block;
width: 12px;
height: 12px;
content: "";
border-top: 3px solid #ffffff;
border-right: 3px solid #ffffff;
transform: rotate(135deg);
}
#acc-wrap > #acc-toggle-btn:hover{
color: #333333;
background: #ffffff;
transition: .5s;
}
#acc-wrap > #acc-toggle-btn:hover::after{
border-color: #333333;
transition: .5s;
}
#acc-wrap.open > #acc-toggle-btn::after{
top: 14px;
transform: rotate(-45deg);
}
#acc-wrap >#acc-detail{
display: grid;
grid-template-rows:0fr;
transition: grid-template-rows 0.5s ease-out;
}
#acc-wrap.open >#acc-detail{
grid-template-rows:1fr;
margin-top: 4px;
background: #E2E3CB;
border-radius: 4px;
}
#acc-detail >div{
margin:8px 16px;
overflow: hidden;
}3.javascriptを記述する
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('acc-toggle-btn').addEventListener('click', function () {
const accDetail = document.getElementById('acc-wrap');
accDetail.classList.toggle('open');
});
});
4.サンプル
複数