.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;
});