Standaard accordeons in Joomla: toegankelijk, semantisch en Bootstrap-vriendelijk

Joomla 5.2 introduceerde stilletjes een krachtige nieuwe inhoudsfunctie: native accordions in TinyMCE, aangedreven door standaard HTML in plaats van JavaScript. Dit geeft contentmakers een eenvoudige manier om inklapbare secties toe te voegen, terwijl de opmaak schoon, toegankelijk en toekomstbestendig blijft.

In plaats van te vertrouwen op JavaScript-zware accordion-widgets, omarmt Joomla nu de ingebouwde disclosure-elementen van de browser: <details> en <summary>. Deze kleine verschuiving heeft grote gevolgen voor toegankelijkheid, prestaties en onderhoudbaarheid en integreert prachtig met de op Bootstrap gebaseerde templates van Joomla.

De TinyMCE Accordion in Joomla

TinyMCE Accordion button — *De Accordion-knop in TinyMCE, geïntroduceerd in Joomla 5.2*

De werkwijze is eenvoudig:

Open een artikel of een aangepast HTML-veld met TinyMCE.
Vul een kop of regel tekst in.
Selecteer de tekst en klik op de knop Accordion.
Voeg inhoud toe onder de kop.

TinyMCE editor with accordion — *Een accordion rechtstreeks gemaakt in de tekstverwerker, geen HTML nodig*

Onder de motorkap genereert TinyMCE standaard HTML:

<details>
  <summary>Section heading</summary>
  <p>Your content here — text, images, lists, etc.</p>
</details>

Er is geen eigen opmaak, geen afhankelijkheid van JavaScript en geen Joomla-specifieke syntaxis. Wat u ziet, is wat de browser van nature begrijpt.

Standaard Open of Gesloten

Nadat u een accordion in TinyMCE hebt gemaakt, kunt u bepalen of deze uitgeklapt of ingeklapt is wanneer de pagina voor het eerst wordt geladen.

Selecteer de accordion-samenvatting en klik op de knop Toggle Accordion in de werkbalk van de tekstverwerker. Deze actie voegt het open-attribuut toe aan of verwijdert het van het <details>-element.

TinyMCE with accordion — *Een accordion rechtstreeks gemaakt in de tekstverwerker, geen HTML nodig"*

Wanneer het attribuut aanwezig is:

<details open="open">

wordt de accordion standaard open weergegeven.

Wanneer het verwijderd is:

<details>

wordt de accordion gesloten geladen, waarbij gebruikersinteractie nodig is om de inhoud te tonen.

Omdat dit gedrag volledig door native HTML wordt bepaald, werkt het consistent in alle browsers en blijft het volledig toegankelijk — zonder dat JavaScript nodig is.

native html accordion — *Frontend weergave van een native HTML accordion. Eerst open en dan gesloten*

Aangedreven door Native HTML: <details> en <summary>

De accordionfunctie maakt gebruik van standaard HTML-disclosure-elementen:

<details> definieert een inklapbare container
<summary> biedt de zichtbare schakelaar

Deze elementen maken deel uit van de HTML-specificatie en worden ondersteund door alle moderne browsers.

Waarom dit belangrijk is

Ingebouwde interactie: Klikken op de summary opent en sluit het paneel automatisch.
Standaard toetsenbordondersteuning: Gebruikers kunnen de accordion bedienen met Enter of Spatie.
Semantische betekenis: Schermlezers herkennen de relatie en kondigen statuswijzigingen aan.
Geen JavaScript nodig: De browser regelt alles.

Dit is toegankelijkheid zoals het hoort — inherent aan de markup, niet achteraf toegevoegd.

Toegankelijkheid Zonder Extra Werk

Traditionele accordions vereisen vaak JavaScript plus zorgvuldig beheerde ARIA-attributen om bruikbaar te zijn voor toetsenbord- en hulptechnologiegebruikers.

Met <details> en <summary>:

De open en gesloten status wordt automatisch blootgesteld
Focusgedrag is standaard correct
Schermlezers kondigen het besturingselement correct aan

Er is geen noodzaak om aria-expanded, role="button", of aangepaste toetsenbordafhandeling toe te voegen. De TinyMCE accordion van Joomla is direct toegankelijk, zonder extra werk.

Dit werkt overal waar Joomla HTML weergeeft — artikelen, modules, en extra velden.

Accordions Stylen met CSS

Browsers passen minimale standaardstyling toe op disclosure-elementen. CSS is waar de echte kracht ligt en Joomla’s Bootstrap-integratie, bijvoorbeeld met Cassiopeia, maakt dit bijzonder elegant.

Knopstijl Summary-koppen

summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--primary);
  color: var(--white);
  padding: .75rem 1rem;
  border-radius: .375rem;
}

details[open] summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

Voeg een eenvoudige open/sluit-indicator toe:

summary::after {
  content: "+";
  font-weight: bold;
}

details[open] summary::after {
  content: "–";
}

De Standaard Browsermarkering Verwijderen

summary::-webkit-details-marker {
  display: none;
}

summary {
  list-style: none;
}

example accordion — *Voorbeeld accordion met card-stijl opmaak*

Joomla Overrides en Integratiestrategie

Het grote voordeel van deze aanpak is dat de TinyMCE-uitvoer niet overschreven hoeft te worden. In plaats daarvan:

Voeg CSS toe aan het aangepaste stylesheet van uw template
Beperk stijlen indien nodig (bijvoorbeeld .article-content details)
Gebruik Bootstrap CSS-variabelen voor langdurige compatibiliteit

Als u toch besluit om Weergave-overrides te maken, houd dan de structuur van <details> en <summary> intact. Ze vervangen door generieke <div>-opmaak betekent dat toegankelijkheid vanaf nul opnieuw opgebouwd moet worden.

Creatieve Toepassingen

Veelgestelde vragen en hulpdocumentatie
Lange artikelen met optionele verdiepende secties
Codevoorbeelden of configuratie-instructies
Mobielvriendelijke inhoudsweergaven

Een Betere Accordion Standaard

De TinyMCE-accordion in Joomla is een stille maar belangrijke verbetering:

Native HTML, geen aangepaste widgets
Standaard toegankelijk
Geen JavaScript-afhankelijkheid
Volledig stylebaar met CSS
Naadloos geïntegreerd met Bootstrap-templates

Dit is Joomla die kiest voor standaarden, toegankelijkheid en onderhoudbaarheid boven complexiteit, en websitebouwers meer kracht geeft met minder code.

How-to-handleidingen