September 24, 2020 archive

Using the details element via a Gutenberg block

As I wrote about last year, the HTML5 “details” element is a very useful and lightweight way to create a collapsed list of questions or other content. Investigating possible options, these kind of parts of a web page seem to be often called an “accordion”. There are a number of accordion plugins, but almost all the ones I could find use some kind of additional JavaScript scripts to make the accordion.

Why do I want to use the <details> element vs JavaScript?

Because the native HTML element is already known to browsers. The extra JavaScript is not needed.

Should this be faster?

I would expect so, because there is no need to load additional JavaScript

What WordPress plugin provides this capability?

I found the “Lightweight Accordion” plugin found in the WordPress plugin directory.

Now, obviously I would need to style it a bit more to have it fit in here well, but it’s very easy to add in Gutenberg. It also has the ability to be added in the Classic Editor, too.