Show / Hide Section Block

Accordion sections built on the browser’s own details and summary elements. Works without JavaScript, by keyboard, and with screen readers.

Get it on WordPress.org

View on GitHub

WordPress 6.4 or later · PHP 7.4 or later · GPL v2 or later

What it does

The browser already knows how to open and close a section: the <details> element, with a <summary> as its heading. It works with a keyboard, screen readers announce it, and it needs no script. This plugin puts that element in the block editor, so editors can build FAQs, specifications, and long policies without a page of JavaScript behind them.

It is four blocks that nest:

Show Hide Group wraps a set of sections.
Show Hide Section is one <details> element.
Show Hide Summary is its heading, the part people click.
Show Hide Details holds what opens: any blocks at all, including images, lists, columns, and other sections.

How it works

Insert a Group, add Sections to it, and write each Summary and its Details. A section comes out of the editor as plain HTML:

<details class="wp-block-happyprime-show-hide-section">
	<summary class="wp-block-happyprime-show-hide-summary">How do I cancel?</summary>
	<!-- Whatever blocks you put inside. -->
</details>Code language: HTML, XML (xml)

A link to a section’s anchor opens it, so a question in an FAQ can be linked to from anywhere and arrive open.

A Group has one option: an “Open all” button. Switch it on and a small script controls every section in the group at once. Leave it off and the plugin loads no JavaScript on the front end at all.

Good for

FAQs and help pages. One answer open at a time, and each question linkable from anywhere.
Long reference. Specifications, requirements, and course outlines, read in part far more often than in full.
The fine print. Terms and policies that have to be on the page without taking it over.

What to know

It is the browser’s own HTML. Every section is a <details> element with a <summary>, so it opens and closes without a script, works from the keyboard, and is announced by screen readers as what it is.
The summary and the content are styled separately. Each is its own block, with the editor’s own colors, spacing, and typography, so the heading can look like a heading and what opens can look like anything.