Hollands Spoor

The Notebooks

Accordions

For the website of the Amsterdam based Academy for Literary Translation we made a website using a custom-build vertical Accordion.

Besides this public website we build an online learning environment for students using Learndash. While teachers where building online courses for this environment, the need was felt also for a regular, horizontal accordion.

At the time such a block did not exist in Gutenberg core so the course-writers started using an accordion from some large block-library. We prefer to use as few of those libraries as possible since they clutter the editing experience, introduce yet another dependency and sometimes add to quite some overhead in resources.

Therefore we build our own Accordion and you can download it via the WordPress plugin repository: https://wordpress.org/plugins/good-accordion/.

Should you download this plugin? Maybe not, because at the release of WordPress 6.9 an accordion block is added to the Gutenberg collection of core blocks. That one works fine in many cases but we leave it in the plugin repository because our own accordion has the following pro’s:

  • Animated opening and closing.
  • Less child-blocks
  • When opening a panel causes a previous panel to collapse, the opening panel shifts upwards and can even disappear from view. In our Accordion, the scrollposition is adjusted so the pane that is opening will always remain in view.
  • Better semantics in HTML, you can chose to use <divs> or <details> and <summary>.

So, maybe you should download it after all.

Here is an example:

Description

Features

Installation

Use

Customize

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *