stylescape/ts/elements/CollapsibleTableHandler.ts

Stylescape is a visual identity framework developed by Scape Agency.

export class CollapsibleTableHandler {
    constructor(containerSelector: string = ".collapsible_table") {
        const tables =
            document.querySelectorAll<HTMLElement>(containerSelector)

        tables.forEach((table) => {
            const header = table.querySelector<HTMLElement>(
                ".collapsible_table--header",
            )
            const content = table.querySelector<HTMLElement>(
                ".collapsible_table--content",
            )
            const flipper = table.querySelector<HTMLElement>(
                ".flipper--down, .flipper--up",
            )

            if (!header || !content) return

            header.addEventListener("click", () => {
                content.classList.toggle("expanded")

                if (flipper) {
                    // flipper.classList.toggle("active")
                    flipper.classList.toggle("flipper--up")
                    flipper.classList.toggle("flipper--down")
                }
            })
        })
    }
}