Show / Hide Section Block

Accessible accordions built on web standards

Show / Hide Section Block creates collapsible content sections in WordPress—perfect for FAQs, documentation, product details, and any content that benefits from progressive disclosure. Unlike typical accordion plugins that rely on JavaScript libraries and custom CSS, this one uses native HTML elements for fast, accessible, future-proof accordions.

Works without javaScript (Unless You Want It)

Built on the browser’s native <details> and <summary> elements, these accordions work instantly with zero dependencies. No heavy libraries to load, no framework requirements, just clean HTML that every browser understands natively.

The result: fast-loading accordions with perfect accessibility built in. Screen readers work automatically. Keyboard navigation just works. User preferences for reduced motion are respected. All without writing a single line of JavaScript.

Four blocks, complete flexibility

The plugin provides four interconnected blocks that give you total control over accordion layouts:

• Show Hide Group: Container that wraps multiple accordion sections together
• Show Hide Section: Individual collapsible sections (uses HTML <details> element)
• Show Hide Summary: The clickable header that users interact with
• Show Hide Details: Container for any content you want to show/hide

This modular approach means you can nest any WordPress blocks inside your accordion sections—paragraphs, images, lists, columns, videos, even other accordions. Build exactly what you need with familiar block editor tools.

Optional “open all” controls

Want to give users an “Open all / Close all” button? Toggle it on in the block settings and minimal JavaScript adds bulk controls. Don’t need it? Leave it off and the plugin loads zero JavaScript on the front end – everything works with pure HTML.

Either way, individual sections always work with native browser functionality. The optional JavaScript only enhances the experience when you specifically want those bulk controls.

Why web standards matter

Accessibility first
Native HTML <details> elements are properly understood by screen readers, keyboard navigation works automatically, and ARIA attributes are handled by the browser. You don’t have to think about accessibility—it’s built into the web standard.

Performance by default
No JavaScript libraries to download. No CSS frameworks to parse. Browser-native functionality means instant loading and minimal overhead.

Future-proof
Built on HTML standards that have been stable for years and will be supported by browsers indefinitely. No dependency updates, no breaking changes, no obsolete code to maintain.

Works everywhere
Native browser support means your accordions work on every device, in every browser, with every assistive technology—no compatibility worries.

Perfect for

• FAQ pages: Organize questions and answers in scannable, collapsible sections
• Documentation: Help users navigate long-form content with expandable sections
• Product details: Present specifications, features, and details without overwhelming visitors
• Course content: Structure lessons and modules with clear show/hide organization
• Terms & policies: Make lengthy legal content more digestible with collapsible sections
• Any content: Anywhere progressive disclosure improves user experience

Simple block editor experience

Insert a Show Hide Group block, add Show Hide Section blocks inside it, and fill in the summary and details. The editor experience is intuitive—if you can use WordPress blocks, you can create accessible accordions.

No shortcodes. No custom markup. No configuration screens. Just blocks that work the way WordPress blocks should.