Een PE-accordeon bouwen
Bouw een accordeon die zonder JavaScript werkt en verbeter deze daarna
Een PE-accordeon bouwen is een gratis HTML Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject HTML Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus HTML Academy bevat in totaal 4 lessen.
Doel: een werkende accordeon zonder JS
De PE-versie van een accordeon gebruikt alleen HTML — het native paar elementen <details>/<summary>. Klik op summary om het paneel te openen of te sluiten. Het werkt zonder CSS, JS of framework: het is ingebouwd in HTML.
<details>
<summary>What is HTML?</summary>
<p>HTML is the markup language of the web.</p>
</details>Ingebouwde toegankelijkheid
<summary> is een knop die focus kan krijgen en met het toetsenbord kan worden geactiveerd (Enter/Spatie schakelt de knop om). Schermlezers kondigen aan of de inhoud uitgevouwen of ingeklapt is. Met twee HTML-elementen bereik je wat een aangepaste React-accordeon pas met tientallen regels ARIA- en gebeurtenisafhandeling kan bieden.
CSS stapelen
Geef de uitklapdriehoek, de binnenruimte van het paneel en de overgangen vorm met gewone CSS. Het kenmerk open weerspiegelt de status, dus details[open] summary { color: blue; } wordt alleen toegepast wanneer de inhoud is uitgevouwen. Voor visuele verfijning is geen JS nodig.
details { border-bottom: 1px solid #ccc; padding: 8px 0; }
summary { font-weight: bold; cursor: pointer; }
details[open] summary { color: var(--accent); }Openen en sluiten animeren
Standaard gaat openen en sluiten direct. Animeer dit door content-visibility met een overgang te veranderen, of gebruik JS dat de hoogte van het paneel meet en max-height animeert. Voor eenvoudige gevallen is het abrupte omschakelen acceptabel; animatie is een verbetering met CSS+JS die je stapsgewijs toevoegt.
Verbeteren met JavaScript
Met JS kun je extra functies toevoegen: andere accordeons sluiten wanneer er één wordt geopend (modus met één geopend item), de geopende status bewaren in localStorage, de overgang animeren of metingen bijhouden van welke items worden uitgevouwen. Elke verbetering voegt alleen functionaliteit toe.
document.querySelectorAll("details").forEach((d) => {
d.addEventListener("toggle", () => {
if (d.open) {
document.querySelectorAll("details").forEach((o) => {
if (o !== d) o.removeAttribute("open");
});
}
});
});De toggle-gebeurtenis
<details> activeert een toggle-gebeurtenis telkens wanneer de geopende status verandert. Gebruik deze om te reageren wanneer de gebruiker de inhoud uitvouwt, zonder klikhandlers opnieuw te moeten koppelen. Werkt zowel met muisklikken als met activering via het toetsenbord.
Status op de server weergeven
Als je een aanvankelijk geopende accordeon wilt weergeven, stel je het kenmerk open aan de serverzijde in: <details open>. De status staat dan in de HTML en is al beschikbaar voor crawlers en gebruikers met een trage verbinding voordat JS wordt uitgevoerd.
Wanneer de ingebouwde optie niet volstaat
Als het ontwerp een aangepast pictogram voor uitvouwen en inklappen, een geanimeerde onthulling of een paneel met meerdere kolommen vereist, bouw dan een aangepaste versie — maar gebruik indien mogelijk <details>/<summary> als onderliggende structuur. Voeg alleen ARIA toe als je de ingebouwde elementen helemaal niet kunt gebruiken.
Verificatie zonder JS
Schakel JavaScript uit in DevTools en controleer of de accordeon nog steeds werkt: klik op summary, het paneel schakelt om, de focusvolgorde blijft logisch en het toetsenbord activeert de knop. Als er iets niet werkt, is JS geen verbetering maar een vereiste, en dat is in strijd met PE.
Eén item openen met alleen CSS
Gebruik voor een radio-achtige optie waarbij er zonder JS maar één item tegelijk geopend kan zijn het kenmerk name op <details> (ondersteund in Chrome/Safari): alle <details name="faq"> delen dezelfde status, zodat het openen van één item de andere sluit. Dit is een patroon met alleen HTML dat radioknoppen nabootst.
Migreren van een accordeon die alleen JS gebruikt
Vervang divs+JS door <details>/<summary> en behoud de CSS-klassen voor de opmaak. Het resultaat is kortere HTML, geen afhankelijkheid van JS, betere toegankelijkheid en inhoud die kan worden geïndexeerd. De meeste JS-accordeons kunnen met minimale zichtbare verandering voor de gebruiker naar PE worden gemigreerd.
Kennischeck
Welk paar HTML-elementen levert een volledig werkende accordeon zonder JavaScript?
Samenvatting
Een PE-accordeon gebruikt de ingebouwde elementen <details>/<summary> als basis — volledig toegankelijk en zonder JS met het toetsenbord te bedienen. Voeg CSS toe voor de visuele opmaak en desgewenst JS voor animaties of gedrag waarbij maar één item tegelijk geopend is. Controleer door JS uit te schakelen of de basis nog steeds werkt. Met het nieuwe kenmerk name kun je zelfs een modus maken waarbij met alleen CSS één item tegelijk geopend is.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “Een PE-accordeon bouwen” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad HTML Academy, waaronder “Een PE-accordeon bouwen”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus HTML Academy bevat in totaal 4 lessen.
Wat leer ik in “Een PE-accordeon bouwen”?
Bouw een accordeon die zonder JavaScript werkt en verbeter deze daarna Je oefent met HTML Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met HTML Academy te beginnen?
Ervaring vooraf is niet nodig. HTML Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “Een PE-accordeon bouwen”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over HTML Academy?
Ja. Elke les over HTML Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- De PE-filosofie: begin met HTML
- Feature detection versus browser sniffing
- Graceful degradation versus progressive enhancement
- Een PE-accordeon bouwen