Yleinen tapa rakentaa accordion Webflow’ssa on käyttää trigger-elementtiä, joka on suora sisaruselementti sisältöelementille. Interaktio asetetaan trigger-elementtiin niin, että sisaruselementti näkyy, kun sitä klikataan.
Saavutettavuuden varmistamiseksi tulee myös lisätä ARIA-attribuutit, jotka vaihtuvat, kun accordion avataan tai suljetaan. Näin ruudunlukijat ja muut apuvälineet voivat ilmoittaa accordionin tilan oikein käyttäjälle.
Suositeltu rakenne ja luokat:
- accordion-item – koko accordion-elementti
- accordion-trigger – klikattava osa, joka avaa/sulkee sisällön
- accordion-content – sisältö, joka näkyy tai piilotetaan
Mukautetut attribuutit accordionille
Voit lisätä mukautettuja attribuutteja Webflow Universityn ohjeiden mukaan: Custom Attributes
Suositellut attribuutit:
accordion-item
role="region"
accordion-trigger
role="button"aria-expanded="false"aria-controls="{id-of-accordion-content}"tabindex="0"(tarvitaan vain, jos trigger ei ole jo linkki tai painike)
accordion-content
aria-hidden="true"
Näiden attribuuttien avulla ruudunlukijat ja muut apuvälineet voivat tulkita accordionin tilan oikein ja parantaa saavutettavuutta.
Mukautettu koodi accordionille
Lisää alla oleva koodi Before </body> -osioon sivun tai projektin asetuksissa.
Huom: Skripti käyttää luokkia:
accordion-trigger→ trigger-elementtiaccordion-content→ sisältöelementti
Jos käytät eri luokkia, päivitä myös skriptissä luokkien nimet vastaamaan omiasi.