<div class="accordion">
<button id="btn" class="accordion__header">
Open content
</button>
<div id="content" class="accordion__content" hidden>
lorem ipsum dolore
</div>
</div>
.accordion__content {
background: #eee;
padding: 1rem;
opacity: 0;
}
.accordion__content.expanded {
animation: fadeIn .5s ease-out forwards;
}
.accordion__content.exiting {
animation: fadeOut .5s ease-out forwards;
}
@keyframes fadeIn {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
}
100% {
display: block;
opacity: 1;
}
}
@keyframes fadeOut {
0% {
display: block;
opacity: 1;
}
99% {
display: block;
}
100% {
display: none;
opacity: 0;
}
}
const btn = document.getElementById("btn");
const content = document.getElementById("content");
let expanded = false;
btn.addEventListener("click", () => {
if (expanded) {
content.classList.remove("expanded");
content.classList.add("exiting");
setTimeout(() => {
content.classList.remove("exiting");
content.setAttribute("hidden", true);
}, 500);
} else {
content.classList.add("expanded");
content.removeAttribute("hidden");
}
expanded = !expanded;
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.