jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML-tools

Gratis HTML Details Accordion Generator

Genereer FAQ accordeons met de native details en summary elementen zonder JavaScript.

Tool laden...

Wat is HTML Details Accordion Generator?

De details en summary elementen maken native inklapbare panelen in HTML. De summary is altijd zichtbaar en fungeert als schakelaar. Bij klikken wordt de rest van de inhoud uitgevouwen. Meerdere open details kunnen exclusief zijn met het name-attribuut voor accordeongedrag. Zonder JavaScript.

Snel antwoord

Gebruik de native HTML details en summary elementen voor een accordeon die werkt zonder JavaScript. Elk details element is onafhankelijk open en dicht.

Last updated: 2026-05-25

Beperkingen

  • Geen automatisch sluiten bij openen van een andere sectie zonder name-attribuut of JavaScript.
  • open-attribuut is binair (geen gedeeltelijk open).
  • Safari 17 en lager ondersteunen geen animatie van details.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Voer de accordeon-items in als titel|inhoud paren.
  2. Kies exclusieve of meerdere-open modus.
  3. De tool genereert details/summary HTML met CSS.
  4. Kopieer de markup en CSS in uw pagina.

Waarvoor je het kunt gebruiken

  • Bouw een FAQ-accordeon voor een productpagina.
  • Maak inklapbare documentatiesecties.
  • Voeg uitklapbare contentblokken toe aan een blog.

Gebruik

Praktische voorbeelden

Voorbeeld

FAQ met exclusieve accordeon

Een FAQ-pagina gebruikt exclusieve modus: openen van een vraag sluit de andere.

Voorbeeld

Recept met inklapbare secties

Een receptpagina gebruikt inklapbare secties voor ingrediënten en instructies.

Veelgemaakte fouten

  • De standaard driehoek verbergen zonder zichtbare schakelaar.
  • details gebruiken voor kritieke content die altijd zichtbaar moet zijn.
  • Het summary element niet aanklikbaar maken met cursor:pointer.

Verificatie

  1. Klik elke sectie om open/dicht te testen zonder JavaScript-fouten.
  2. Test met JavaScript uitgeschakeld of de accordeon nog werkt.

FAQ

Vragen over HTML Details Accordion Generator

Hoe maak ik slechts een details tegelijk open?

Voeg hetzelfde name-attribuut toe aan elk details element voor exclusief accordeongedrag.

Werkt details in alle browsers?

Chrome 12+, Edge 79+, Safari 6+, Firefox 49+. Bijna universele ondersteuning.

Hoe animeer ik het openen/sluiten?

Gebruik de ::details-content pseudo-element met CSS-transities in Chrome 131+, of JavaScript.

Kan ik details voor FAQ gebruiken?

Ja. Het name-attribuut creëert exclusief accordeongedrag. Schermlezers herkennen de status natively.

Gerelateerde tools

Meer html-tools

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool

Probeer ook

Probeer ook