Elementor addon offering 120+ widgets and templates — Elementor Gallery, Slider, Form, Post Grid, Menu, Accord...
Simple accordion for adding collapse elements to pages without affecting page load time. Includes Gutenberg block and shortcode for classic editor.
Lightweight Accordion is a WordPress plugin that enables you to add collapsible elements to your posts using Gutenberg blocks or shortcodes. It utilises the native details HTML tag and minimal CSS to create a javascript-free accordion, which helps to keep page load times low.
The plugin offers customisation options for the accordion title, default open state, borders, colours, and grouping behaviour. It is suitable for users looking to enhance their content presentation without adding significant overhead to their site's performance.
Best for: This plugin is ideal for WordPress users who want to create collapsible content sections efficiently.
What it does well
Where it falls short
Lightweight Accordion provides a straightforward solution for adding collapsible content to WordPress sites, particularly for those focused on performance and simplicity.
Andy Feliciotti's own description of Lightweight Accordion, lightly tidied.
Lightweight Accordion plugin for WordPress allows you to add collapse elements to posts using a Gutenberg block or a shortcode (via classic editor). By using the details HTML tag and a few lines of CSS this allows for a javascript-free accordion for minimum page load.
Extremely Lightweight (<1kb): Without using Javascript the plugin uses the native details HTML tag and a few lines of code for almost no impact on front-end.
Customizable: Options include customizing the HTML tag used for the accordion title, open by default, borders, colors, and accordion grouping (auto-close others when one opens).
Here are a few examples of using the accordion plugin with shortcodes.
[lightweight-accordion title="My Accordion"]My Content[/lightweight-accordion]
Additionally you can display the accordion open on load with the accordion_open option.
[lightweight-accordion title="My Accordion" accordion_open=true]My Content[/lightweight-accordion]
You can also change the html tag wrapping the title of the accordion using the title_tag option.
[lightweight-accordion title="My Accordion" title_tag="h3"]My Content[/lightweight-accordion]
If you want to include FAQ schema you can add the schema option and set it to faq.
[lightweight-accordion title="What is your return policy?" schema="faq"]You have 1 week to return your items[/lightweight-accordion]
If you’d like put a border around the content of the accordion you can use the “bordered” attribute.
[lightweight-accordion title="Bordered Content" bordered=true]My Content[/lightweight-accordion]
If you want accordions to auto-close when another opens (exclusive accordion), use the “group” attribute with the same value on each accordion.
[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]
Other plugins for extending a page builder.
Elementor addon offering 120+ widgets and templates — Elementor Gallery, Slider, Form, Post Grid, Menu, Accord...
Join millions who empower their websites with ElementsKit Elementor Addons. Get templates, & 100+ widgets...
Elementor addons with 18+ free widgets, Header & Footer Builder, WooCommerce widgets & templates. Trus...
Elementor Carousel, Mega Menu, Posts List/Slider, WooCommerce Widgets, Display Conditions, AI Abilities, Prema...
Elementor templates, Header footer builder, Elementor Post Grid, Woocommerce Grid builder, Slider, Forms, Gall...
Disable Gutenberg Block Editor and restore the Classic Editor and original Edit Post screen (TinyMCE, meta box...