Kap 5.4 - Små interaktioner utan ramverk

Mål

• Bygga små interaktioner med knapp, event och klass.
• Förstå när aria-expanded behöver uppdateras.
• Använda JavaScript för att visa, dölja eller byta läge.

Visa och dölj meny

En vanlig interaktion är en menyknapp på små skärmar. Knappen växlar en klass på menyn.

const menuButton = document.querySelector(".menu-button");
const menu = document.querySelector(".menu");

menuButton.addEventListener("click", function () {
    menu.classList.toggle("is-open");
});

Uppdatera tillgängligt läge

Om en knapp öppnar och stänger något bör aria-expanded spegla läget.

const isOpen = menu.classList.toggle("is-open");
menuButton.setAttribute("aria-expanded", String(isOpen));

Tabs och aktiva lägen

Tabs, filterknappar och temaväxling bygger ofta på samma idé: hitta element, lyssna på klick och ändra klass eller text.

button.addEventListener("click", function () {
    panel.classList.add("active");
});

När räcker enkel JavaScript?

För små komponenter behöver du oftast inget ramverk. Börja enkelt och bygg bara mer avancerat när problemet kräver det.