expandableItemJs

const expandableItem = () => {
	let expandableItem = document.querySelectorAll(".expandableItemJs");
	let i;

	function getHeightVisible(element) {
		const mobileBreakpoint = 480;
		const tabletBreakpoint = 768;

		if (window.innerWidth <= mobileBreakpoint) {
			return element.getAttribute("data-expand-mobile");
		} else if (window.innerWidth <= tabletBreakpoint) {
			return element.getAttribute("data-expand-tablet");
		} else {
			return element.getAttribute("data-expand-desktop");
		}
	}

	expandableItem.forEach((expandableItem) => {
		expandableItem.classList.add("expandableItemJs--hide");

		// creation of the button
		const buttonExpand = document.createElement("button");
		buttonExpand.classList.add("expandableItemJs__button");
		buttonExpand.innerHTML = 'Voir tout le programme';
		expandableItem.appendChild(buttonExpand);
		//-----
		const realHeight = expandableItem.offsetHeight;
		const heightVisible = getHeightVisible(expandableItem);

		expandableItem.style.height = heightVisible + "px";

		buttonExpand.addEventListener("click", () => {
			expandableItem.classList.remove("expandableItemJs--hide");
			expandableItem.style.height = realHeight + "px";
			
			setTimeout(() => {
				expandableItem.style.height = "auto";
				buttonExpand.remove();
			}, 550);
		});
	});
};
export default expandableItem;

expandableItemJscss

.expandableItemJs {
	position: relative;
	transition: all ease 1000ms;

	//when element is not expandable
	&--hide {
		@include bottom-gradient-overflow(200px, #fff);
		overflow-y: clip;

	}

	&__button {
		position: absolute;
		padding: 10px;
		bottom: 0;
		z-index: 2;
		@extend .icon-chevron-down;
		@extend .btn;
		@extend .btn-icon-right;
		bottom: 0px;
		transform: translateX(-50%);
		left: 50%;



		&:before {
			@include font();
		}
	}
}