native js slideToggle

main.js

btn.addEventListener('click', () => {
	btn.classList.toggle('opened');
	slideToggle(popupBlock, 300, function() {
		console.log('callback ended animation');
	});
})

function slideToggle(container, speed = 300, callback) {
	let currentState;
	if (window.getComputedStyle(container).display == "none") {
		currentState = 'closed';
	}
	if (container.dataset.state === "closed") {
		currentState = 'closed';
	}
	if (currentState == "closed") {
		slideDown(container, speed, callback);
	} else {
		slideUp(container, speed, callback);
	}
}

function slideUp(container, speed = 300, callback) {
	container.dataset.state = 'closed';
	if (container.dataset.pt == undefined) {
		container.dataset.pt = window.getComputedStyle(container).paddingTop;
	}
	if (container.dataset.pb == undefined) {
		container.dataset.pb = window.getComputedStyle(container).paddingBottom;
	}
	if (container.dataset.animating !== "true") {
		container.dataset.height = container.clientHeight;
	}
	container.style.transition = `all ${speed}ms ease`;
	container.style.overflow = 'hidden';
	container.style.height = `${container.clientHeight}px`;
	container.dataset.animating = true;
	setTimeout(function () {
		container.style.height = '0px';
		container.style.paddingTop = '0px';
		container.style.paddingBottom = '0px';
	}, 0);
	container.addEventListener('transitionend', function () {
		if (container.dataset.state == "closed") {
			container.style.display = 'none';
		}
		container.dataset.animating = false;
		if (callback) {
			callback();
		}
	}, {
		once: true
	});
}

function slideDown(container, speed = 300, callback) {
	let pt, pb, currentHeight;
	container.dataset.state = 'opened';
	if (container.dataset.pt == undefined) {
		container.dataset.pt = window.getComputedStyle(container).paddingTop;
	}
	if (container.dataset.pb == undefined) {
		container.dataset.pb = window.getComputedStyle(container).paddingBottom;
	}
	pt = parseInt(container.dataset.pt);
	pb = parseInt(container.dataset.pb);
	container.style.transition = `all ${speed}ms ease`;
	container.style.overflow = 'hidden';
	container.style.display = 'block';
	if (container.dataset.animating == "true") {
		currentHeight = container.clientHeight;
	} else {
		currentHeight = "0px";
		container.style.paddingTop = '0px';
		container.style.paddingBottom = '0px';
		container.style.display = 'block';
		container.style.height = 'auto';
		container.dataset.height = container.clientHeight + pt + pb;
	}
	container.style.height = currentHeight;
	container.dataset.animating = true;
	setTimeout(function () {
		container.style.height = `${container.dataset.height}px`;
		container.style.paddingTop = `${pt}px`;
		container.style.paddingBottom = `${pb}px`;
	}, 0);
	container.addEventListener('transitionend', function () {
		if (container.dataset.state == "opened") {
			container.style.height = 'auto';
		}
		container.dataset.animating = false;
		if (callback) {
			callback();
		}
	}, {
		once: true
	});
}