Sha256: b8cbe0dd63f12f54f17905686f066a848d310b50eac8b88c7d60e24a25dde72c
Contents?: true
Size: 1 KB
Versions: 13
Compression:
Stored size: 1 KB
Contents
/**
* Toggles the visibility of an HTML element (or elements),
* when the trigger is activated.
*
* @param {HTMLElement} component trigger element
* @returns {void}
*/
export default function createToggle(component) {
const { toggle } = component.dataset
if (!component.id) {
// when component has no id, we enforce to have it one
component.id = `toggle-${Math.random().toString(36).substring(7)}`
}
component.setAttribute("aria-controls", toggle);
toggle.split(" ").forEach((id) => {
const node = document.getElementById(id)
if (node) {
node.setAttribute("aria-labelledby", [node.getAttribute("aria-labelledby"), component.id].filter(Boolean).join(" "))
}
})
component.addEventListener("click", () => {
toggle.split(" ").forEach((id) => {
const node = document.getElementById(id)
if (node) {
node.hidden = !node.hidden
node.setAttribute("aria-expanded", !node.hidden);
}
});
document.dispatchEvent(new Event("on:toggle"));
})
}
Version data entries
13 entries across 13 versions & 1 rubygems