Accordion allows users to expand and collapse sections of content.
<div class="c-accordion">
<div class="c-accordion__item">
<h3>Accordion Title <span class="c-accordion__item-icon">+</span></h3>
<div class="c-accordion__panel">
<div class="c-accordion__panel-inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis rhoncus sapien. Quisque sodales consequat leo in condimentum. Fusce risus eros, dapibus in sodales nec, tempor nec nisi. Sed non nisi faucibus leo pellentesque pharetra.
</div>
</div>
</div>
<div class="c-accordion__item">
<h3>Accordion Title <span class="c-accordion__item-icon">+</span></h3>
<div class="c-accordion__panel">
<div class="c-accordion__panel-inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis rhoncus sapien. Quisque sodales consequat leo in condimentum. Fusce risus eros, dapibus in sodales nec, tempor nec nisi. Sed non nisi faucibus leo pellentesque pharetra.
</div>
</div>
</div>
<div class="c-accordion__item">
<h3>Accordion Title <span class="c-accordion__item-icon">+</span></h3>
<div class="c-accordion__panel">
<div class="c-accordion__panel-inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis rhoncus sapien. Quisque sodales consequat leo in condimentum. Fusce risus eros, dapibus in sodales nec, tempor nec nisi. Sed non nisi faucibus leo pellentesque pharetra.
</div>
</div>
</div>
</div>
.c-accordion__item {
border: 1px solid #a0aec0;
border-radius: 5px;
padding: 20px;
margin-bottom: 10px;
position: relative;
cursor: pointer;
}
.c-accordion__item.is-active .c-accordion__item-icon {
transform: rotate(45deg);
}
.c-accordion__item-icon {
font-size: 40px;
font-weight: 100;
position: absolute;
top: 5px;
right: 20px;
transition: all 0.2s ease;
}
.c-accordion__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.2s ease-out;
}
.c-accordion__panel.is-active {
grid-template-rows: 1fr;
}
.c-accordion__panel-inner {
overflow: hidden;
}
.c-accordion {
&__item {
border: 1px solid #a0aec0;
border-radius: 5px;
padding: 20px;
margin-bottom: 10px;
position: relative;
cursor: pointer;
&.is-active {
.c-accordion__item-icon {
transform: rotate(45deg);
}
}
}
&__item-icon {
font-size: 40px;
font-weight: 100;
position: absolute;
top: 5px;
right: 20px;
transition: all 0.2s ease;
}
&__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.2s ease-out;
&.is-active {
grid-template-rows: 1fr;
}
}
&__panel-inner {
overflow: hidden;
}
}
const accordions = document.querySelectorAll('.c-accordion__item');
accordions.forEach((accordion) => {
accordion.addEventListener('click', () => {
accordion.classList.toggle('is-active');
accordion.querySelector('.c-accordion__panel').classList.toggle('is-active');
});
});