58 lines
1.7 KiB
JavaScript
58 lines
1.7 KiB
JavaScript
window.addEventListener("DOMContentLoaded", (event) => {
|
|
// GETTING ELEMENTS FROM THE DOM
|
|
const vocabulaireSummary = document.querySelector(
|
|
".homegrade-blocks-vocabulaire-summary"
|
|
);
|
|
const wordsDetails = vocabulaireSummary.querySelectorAll("details");
|
|
|
|
function openAccordion(wordDetail) {
|
|
let contentDefinitionWrapper = wordDetail.querySelector(
|
|
".homegrade-blocks-vocabulaire-summary__content-wrapper"
|
|
);
|
|
let contentDefinitionParagraph = wordDetail.querySelector(
|
|
".homegrade-blocks-vocabulaire-summary__content"
|
|
);
|
|
wordDetail.setAttribute("open", "true");
|
|
wordDetail.setAttribute("is_opening", "");
|
|
|
|
contentDefinitionWrapper.style.height =
|
|
contentDefinitionParagraph.offsetHeight + "px";
|
|
// remove is opening after css transition
|
|
|
|
wordDetail.addEventListener("transitionend", () => {
|
|
wordDetail.removeAttribute("is_opening");
|
|
});
|
|
}
|
|
function closeAccordion(wordDetail) {
|
|
let contentDefinitionWrapper = wordDetail.querySelector(
|
|
".homegrade-blocks-vocabulaire-summary__content-wrapper"
|
|
);
|
|
|
|
contentDefinitionWrapper.style.height = "0px";
|
|
|
|
setTimeout(() => {
|
|
wordDetail.removeAttribute("open");
|
|
}, 300);
|
|
}
|
|
// HANDLING CLICK
|
|
function toggleActive(wordDetail) {
|
|
let isOpen = wordDetail.getAttribute("open");
|
|
let isOpening = wordDetail.getAttribute("is_opening");
|
|
|
|
if (isOpen == null && isOpening == null) {
|
|
openAccordion(wordDetail);
|
|
}
|
|
if (isOpen == "true") {
|
|
closeAccordion(wordDetail);
|
|
}
|
|
}
|
|
|
|
// HANDLING CLICK
|
|
Array.from(wordsDetails).forEach((wordDetail) => {
|
|
wordDetail.addEventListener("click", (event) => {
|
|
event.preventDefault();
|
|
toggleActive(wordDetail);
|
|
});
|
|
});
|
|
});
|