This extremely lightweight accordion plugin for WordPress lets you add collapsible sections to any page using the block editor or a shortcode. It uses the native HTML details tag and a few lines of CSS, so there’s no JavaScript and no jQuery. The whole stylesheet is under 1KB gzipped, and it only loads on pages that actually use an accordion. If you are still weighing options, we compare it against the other WordPress accordion plugins too.
What’s new in 1.7.0
- Smooth open and close animation. Accordions now slide instead of snapping. It’s pure CSS using
::details-content, so it still ships zero JavaScript. Browsers that don’t support it yet just open instantly like before, and the animation is skipped for anyone using reduced motion. - Icon options. Swap the default triangle for a chevron or a plus/minus, or remove it entirely. You can also move the icon to the right side of the title.
- Anchor links open the accordion. Linking to an accordion (or to a heading inside one) now opens it automatically instead of scrolling to a closed box.
- WordPress 7.0 support. The blocks are updated to Block API version 3 for the new iframed editor. If you had trouble adding links inside an accordion in the editor, this fixes it.
- Better FAQ schema. Answers keep the formatting Google supports (links, paragraphs and lists) instead of being flattened to plain text.
Features
- No JavaScript on the front end, it uses the native
detailsandsummarytags - Works in the block editor and in the classic editor via shortcode
- Accordion groups, so only one item in a group stays open at a time
- FAQ schema output as JSON-LD for rich results
- Title colors, background colors, borders and a choice of heading tag
- CSS only loads on pages where an accordion is used
Using the block
Search for “Lightweight Accordion” in the block inserter, then type your title and drop any blocks you want inside the body. Everything else lives in the block sidebar: open by default, border, heading tag, icon style, FAQ schema and title colors.
To build a set of questions where only one answer is open at a time, click Add Item in the block toolbar. That wraps your accordion in a group and adds a second one, and you can keep clicking to add more.
Using the shortcode
Here’s the simplest version:
[lightweight-accordion title="My Accordion"]My Content[/lightweight-accordion]Open it by default:
[lightweight-accordion title="My Accordion" accordion_open=true]My Content[/lightweight-accordion]Use a chevron icon on the right side of the title:
[lightweight-accordion title="My Accordion" icon="chevron" icon_position="right"]My Content[/lightweight-accordion]Add FAQ schema so the question and answer can show up as a rich result:
[lightweight-accordion title="What is your return policy?" schema="faq"]You have 1 week to return your items[/lightweight-accordion]Group several accordions so opening one closes the others:
[lightweight-accordion title="Question 1" group="faq"]Answer 1[/lightweight-accordion]
[lightweight-accordion title="Question 2" group="faq"]Answer 2[/lightweight-accordion]
[lightweight-accordion title="Question 3" group="faq"]Answer 3[/lightweight-accordion]Shortcode options
Every option below is also available in the block sidebar.
| Option | Default | What it does |
|---|---|---|
title | none | Required. The clickable title at the top of the accordion. |
title_tag | span | The HTML tag wrapping the title. Use a heading tag (h2 through h6) if you want it in the page outline. |
accordion_open | false | Set to true to have the accordion open on page load. |
bordered | false | Set to true to add a border around the accordion content. |
icon | triangle | Set to chevron, plus or none to change the marker. The chevron rotates and the plus becomes a minus when opened. |
icon_position | left | Set to right to move the icon to the right side of the title. |
group | false | Give several accordions the same group name and only one stays open at a time. Uses the native details name attribute, so it needs no JavaScript. |
schema | false | Set to faq to include this question and answer in the page’s FAQ schema. |
title_text_color | none | Any CSS color or hex value for the title text. |
title_background_color | none | Any CSS color or hex value for the title background. |
anchor | none | Adds an ID to the accordion so you can link straight to it. Linking to it opens it. |
class | none | Adds a custom class to the accordion’s outer div. |
autop | true | Set to false to stop WordPress wrapping the content in paragraph tags. |
Filters for developers
Stop the front end stylesheet from loading (style the accordion yourself):
add_filter('lightweight_accordion_include_frontend_stylesheet', '__return_false');Load the stylesheet on every page instead of only where an accordion is used:
add_filter('lightweight_accordion_always_include_frontend_stylesheet', '__return_true');Stop the editor stylesheet from loading in the admin:
add_filter('lightweight_accordion_include_admin_stylesheet', '__return_false');Stop shortcodes inside accordion content from being processed:
add_filter('lightweight_accordion_process_shortcodes', '__return_false');Disable the small inline script that opens an accordion when it’s the target of a URL hash:
add_filter('lightweight_accordion_anchor_script', '__return_false');Output FAQ schema as inline microdata instead of JSON-LD (not recommended):
add_filter('lightweight_accordion_output_microdata', '__return_true');Requirements
WordPress 5.9 or newer and PHP 7.0 or newer. I’ve tested 1.7.0 on WordPress 7.0.
Press
- Best WordPress Accordion Plugins – WPLeaders
