import { createElement } from "./createElement"; /** * Possible configuration parameters when creating the accordion element. */ interface IAccordionConfigurationParameters { /** * The HTML to appear in the accordion header. */ hdrText?: string; /** * A (hopefully) unique identifier for the accordion. */ id?: string; /** * The HTML to appear in the expanded accordion. */ panelText?: string; } /** * Creates both the header and panel element of an accordion and sets the click handler * @param params The creation parameters. */ export function createAccordionElement(params: IAccordionConfigurationParameters): any[] { const liElem: HTMLLIElement = createElement("li") as HTMLLIElement; const header: HTMLButtonElement = createElement("button", { class: "accordion-header", clickListener() { this.classList.toggle("active"); const pnl: CSSStyleDeclaration = (this.nextElementSibling as HTMLDivElement).style; pnl.display = pnl.display === "block" ? "none" : "block"; }, id: params.id !== undefined ? `${params.id}-hdr` : undefined, innerHTML: params.hdrText, }) as HTMLButtonElement; const panel: HTMLDivElement = createElement("div", { class: "accordion-panel", id: params.id !== undefined ? `${params.id}-panel` : undefined, innerHTML: params.panelText, }) as HTMLDivElement; liElem.appendChild(header); liElem.appendChild(panel); return [ liElem, header, panel, ]; }