Hollands Spoor

Plugged in

Accordeons

Voor de Vertalersvakschool in Amsterdam en Antwerpen maakten we een website met een eigengemaakte verticale Accordeon.

Naast deze publieke website bouwden we ook een besloten studenten omgeving met behulp van Learndash. Terwijl docenten hiervoor online cursussen schreven bleek de behoefte te bestaan aan een generieke horizontale accordeon.

Op dat moment bestond daarvoor nog niet een standaardblock in de Gurenberg core zodat cursus-makers hun toevlucht namen tot een accordeon-block uit een of andere omvangrijke block-bibliotheek. Wij gebruiken bij voorkeur zo min mogelijk van dit soort bibliotheken omdat ze de editor compliceren met grote hoeveelheden ongebruikte knoppen en mogelijkheden, omdat ze een nieuwe afhankelijkheid van 3rd party software introduceren en omdat ze vaak voor extra overhead in de website zorgen.

Daarom bouwden we onze eigen standalone accordeon. Deze is verkrijgbaar via de WordPress plugin repository: https://wordpress.org/plugins/good-accordion/.

Moet u deze plugin downloaden? Misschien niet want met de release van WordPress 6.9 is er een accordeon block toegevoegd aan de Gutenberg core-blocks. Die werkt tamelijk goed maar toch laten we onze accordeon voorloping in de plugin-repository staan omdat die van ons een paar belangrijke voordelen heeft:

  • Geanimeerd openen en sluiten van Accordeon tabs
  • Er zijn minder child-blocks nodig
  • Als een accordeon-tab sluit bij het openen van een andere accordeon-tab, dan kan de zojuist geopende tab geheel of gedeeltelijk uit beeld verdwijnen ( als de gesloten tab boven de geopende tab staat ). De scrollpositie van onze accordeon wordt aangepast als deze uit beeld dreigt te verdwijnen.
  • Betere semantiek in HTML: er is keuze tussen <div> tags of <details> en <summary> tags.

Misschien toch maar downloaden?

Hier is het beloofde voorbeeld:

Description

Features

Installation

Use

Customize

Reacties

Je e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *