目次(クリックでジャンプ)
【JS/CSS】よくある質問などに使えるアコーディオンボックス
HTMLコード
<div class="c__acc js-acc-item">
<p class="c__acc__ttl js-acc-single-trigger">バナナはおやつにはいりますか?</p>
<div class="c__acc__content">
<p>はい、もちろんです。バナナはおやつに入ります。</p>
</div>
</div>
CSS
.c__acc {
background: #fff;
padding: 1rem 2rem;
width: 100%;
max-width: 800px;
margin: 1rem auto 0;
border: solid 1px grey
border-radius: 2rem;
&__ttl {
font-weight: bold;
font-size: 1.2rem;
margin-bottom: 0;
cursor: pointer;
position: relative;
padding-right: 2rem;
&::after {
content: "";
position: absolute;
right: 0;
top: 40%;
transition: all 0.2s ease-in-out;
display: block;
width: 10px;
height: 10px;
border-top: solid 2px #1c1c1c;
border-right: solid 2px #1c1c1c;
transform: translateY(-50%) rotate(135deg);
}
}
&__content {
max-height: 0;
overflow: hidden;
transition: .3s;
}
&.is-open {
.c__acc__content {
max-height: max-content;
padding-top: 0.5rem;
}
.c__acc__ttl::after {
transform: translateY(-50%) rotate(315deg);
}
}
}
JS
function acc() {
//アコーディオンメニュー
const accSingleTriggers = document.querySelectorAll('.js-acc-single-trigger');
accSingleTriggers.forEach(trigger => trigger.addEventListener('click', toggleAccordion));
function toggleAccordion() {
const items = document.querySelectorAll('.js-acc-item');
const thisItem = this.parentNode;
items.forEach(item => {
if (thisItem == item) {
thisItem.classList.toggle('is-open');
return;
}
item.classList.remove('is-open');
});
}
} acc();