<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;
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.