accordion-flip

accordion.js

const container = document.querySelector('.accordion-container');
const titles = document.querySelectorAll('.accordion-title');
titles.forEach(t => {
	t.addEventListener('click', ({currentTarget}) => {
		const contentHeight = currentTarget.nextElementSibling.offsetHeight;
		container.style.setProperty('--content-height', `${-contentHeight}px`);
		const accordion = currentTarget.parentElement;
		if (accordion.classList.contains('accordion-active')) {
			accordion.classList.remove('accordion-active', 'move-sibling-accordion');
			return
		}
		// если нужно закрывать предыдущий аккордеон
		// const accordionsActive = container.querySelectorAll('.active');
		// accordionsActive.forEach(a => a.classList.remove('active'))

		accordion.classList.add('accordion-active', 'move-sibling-accordion');
		accordion.addEventListener('animationend', () => {
			const ac = container.querySelectorAll('.move-sibling-accordion');
			ac.forEach(a => a.classList.remove('move-sibling-accordion'))
		}, {once: true});
	});
})

/*
<div class="accordion-container">
	<div class="accordion">
		<div class="accordion-title"><h3>accordion 1</h3></div>
		<div class="accordion-content"></div>
	</div>
</div>


@keyframes move-accordion {
	to {
		transform: none;
	}
}
@keyframes show-content {
	to {
		clip-path: inset(0 0 0 0);
	}
}

.accordion-container {
	--content-height:0;
}

.accordion-active .accordion-content {
	visibility: visible;
	position: static;
	clip-path: inset(0 0 calc(var(--content-height) * -1) 0);
	animation: show-content .5s ease-in-out both;
}

.move-sibling-accordion ~ .accordion {
	transform: translateY(var(--content-height, 0));
	animation: move-accordion .5s ease-in-out both;
}

.accordion-content {
	visibility: hidden;
	position: absolute;
	background: white;
}
*/