56 lines
2.0 KiB
JavaScript
56 lines
2.0 KiB
JavaScript
var accordion = document.querySelector("[accordion]");
|
|
|
|
var sections = accordion.querySelectorAll("[accordion-section]");
|
|
|
|
sections.forEach(section => {
|
|
let trigger = section.querySelector("[section-trigger]");
|
|
trigger.addEventListener("click", function () {
|
|
if (this.getAttribute("aria-expanded") == "true") {
|
|
this.setAttribute("aria-expanded", "false");
|
|
} else {
|
|
let accordion = this.closest("[accordion]");
|
|
let triggers = accordion.querySelectorAll("[section-trigger]");
|
|
triggers.forEach(trigger => {
|
|
trigger.setAttribute("aria-expanded", "false");
|
|
});
|
|
this.setAttribute("aria-expanded", "true");
|
|
}
|
|
init(sections);
|
|
});
|
|
});
|
|
|
|
//initialization max height
|
|
init(sections)
|
|
|
|
function init(sections) {
|
|
sections.forEach(section => {
|
|
let content = section.querySelector("[section-content]");
|
|
let trigger = section.querySelector("[section-trigger]");
|
|
if(trigger.getAttribute("aria-expanded") == "true"){
|
|
if(trigger.querySelector("[section-close-icon]")){
|
|
let close_icon = trigger.querySelector("[section-close-icon]");
|
|
close_icon.classList.remove("hidden");
|
|
}
|
|
if(trigger.querySelector("[section-open-icon]")){
|
|
let open_icon = trigger.querySelector("[section-open-icon]");
|
|
open_icon.classList.add("hidden");
|
|
}
|
|
trigger.classList.remove("text-slate-500")
|
|
trigger.classList.add("text-slate-700")
|
|
content.style.maxHeight = content.scrollHeight + "px";
|
|
} else {
|
|
if(trigger.querySelector("[section-open-icon]")){
|
|
let open_icon = trigger.querySelector("[section-open-icon]");
|
|
open_icon.classList.remove("hidden");
|
|
}
|
|
if(trigger.querySelector("[section-close-icon]")){
|
|
let close_icon = trigger.querySelector("[section-close-icon]");
|
|
close_icon.classList.add("hidden");
|
|
}
|
|
trigger.classList.remove("text-slate-700")
|
|
trigger.classList.add("text-slate-500")
|
|
content.style.maxHeight = "0px";
|
|
}
|
|
});
|
|
}
|