Title: Lightweight Accordion
Author: Andy Feliciotti
Published: <strong>14 April, 2020</strong>
Last modified: 12 òktober, 2026

---

Search plugins

![](https://ps.w.org/lightweight-accordion/assets/banner-772x250.jpg?rev=2690414)

![](https://ps.w.org/lightweight-accordion/assets/icon-256x256.png?rev=2478614)

# Lightweight Accordion

 By [Andy Feliciotti](https://profiles.wordpress.org/someguy9/)

[Download](https://downloads.wordpress.org/plugin/lightweight-accordion.1.8.0.zip)

[Live Preview](https://pap-cw.wordpress.org/plugins/lightweight-accordion/?preview=1)

 * [Details](https://pap-cw.wordpress.org/plugins/lightweight-accordion/#description)
 * [Reviews](https://pap-cw.wordpress.org/plugins/lightweight-accordion/#reviews)
 *  [Installation](https://pap-cw.wordpress.org/plugins/lightweight-accordion/#installation)
 * [Development](https://pap-cw.wordpress.org/plugins/lightweight-accordion/#developers)

 [Support](https://wordpress.org/support/plugin/lightweight-accordion/)

## Description

**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).

**Ready-made patterns:** Insert an FAQ section (with FAQ schema), an accordion group
that keeps one section open at a time, or bordered accordions from the Patterns 
tab of the block inserter, under Accordions.

#### Shortcode Usage examples

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]
    ```

If you’d like to swap the default triangle marker for a chevron or plus/minus icon(
optionally on the right side of the title) use the “icon” and “icon_position” attributes.

    ```
    [lightweight-accordion title="My Accordion" icon="chevron" icon_position="right"]My Content[/lightweight-accordion]
    ```

#### Shortcode Options

Here is the full listing of shortcode options. Additionally all of these options
are accessible when using the Gutenberg block.

 * **title** (Required Default: null) The title of your accordion will be displayed
   at the top for users to click. A good example would be to include a user’s question
   so they could click it for more details.
 * **content** (Required Default: null) Content that will go into your accordion
   element.
 * **title_tag** (Default: “span”) This sets the html tag that wraps the title in
   the accordion summary. Useful if you want to make it a heading tag for SEO purposes.
 * **accordion_open** (Default: false) Set this to true if you want your accordion
   to be open by default.
 * **bordered** (Default: false) Set this to true if you want a border around the
   accordion content.
 * **title_text_color** (Default: false) Set this to a hex value or CSS color to
   change the color of the accordion title text.
 * **title_background_color** (Default: false) Set this to a hex value or CSS color
   to change the color of the accordion title text.
 * **schema** (Default: false) Set this to faq if you’d like FAQ schema to be included.
 * **class** (Default: false) Used to add a custom class to the parent container
   of the accordion.
 * **anchor** (Default: null) Adds the value as an ID to the accordion div as an
   anchor.
 * **autop** (Default: true) By default the shortcode will wrap text in a ‘p’ tag.
   Set this to false if you’d like this disabled for the specific accordion.
 * **group** (Default: false) Set this to a group name to make accordions with the
   same group auto-close when another opens. Uses the native HTML details name attribute
   for zero JavaScript overhead.
 * **icon** (Default: false) Set this to “chevron”, “plus”, or “none” to replace
   the default triangle marker. The chevron rotates and the plus becomes a minus
   when the accordion opens.
 * **icon_position** (Default: false) Set this to “right” to display the chevron
   or plus icon on the right side of the accordion title.

#### Additional Details

If you’d like to remove the “lightweight-accordion.css” from being enqueued on your
site use the filter below. It’s recommend you style the accordion yourself if you
use this filter.

    ```
    add_filter('lightweight_accordion_include_frontend_stylesheet', '__return_false' );
    ```

If you’d like to remove the “lightweight-accordion/editor-styles.css” from being
enqueued in the admin area of your site you can use the filter below.

    ```
    add_filter('lightweight_accordion_include_admin_stylesheet', '__return_false' );
    ```

If you’d like to remove processing of shortcodes in accordion content you can use
this filter.

    ```
    add_filter('lightweight_accordion_process_shortcodes', '__return_false' );
    ```

If you’d like to use inline Microdata for FAQ schema you can use this filter. (Not
recommended)

    ```
    add_filter('lightweight_accordion_output_microdata', '__return_true' );
    ```

If you’d like to force “lightweight-accordion.css” to load on all of your site you
can use this filter. By default the CSS only loads on pages that show an accordion(
including accordions in widgets and page builders), so this is only needed for accordions
added to the page some other way, for example with JavaScript.

    ```
    add_filter('lightweight_accordion_always_include_frontend_stylesheet', '__return_true' );
    ```

When a page contains an accordion a tiny inline script is added to the footer that
automatically opens accordions targeted by a URL hash (for example a link to an 
accordion’s anchor). If you’d like to disable this you can use the filter below.

    ```
    add_filter('lightweight_accordion_anchor_script', '__return_false' );
    ```

## Screenshots

[⌊Example of the lightweight accordions on the front-end of the site.⌉⌊Example of
the lightweight accordions on the front-end of the site.⌉[

Example of the lightweight accordions on the front-end of the site.

[⌊Accordion options when using the Gutenberg block.⌉⌊Accordion options when using
the Gutenberg block.⌉[

Accordion options when using the Gutenberg block.

## Blocks

This plugin provides 1 block.

 *   Lightweight Accordion Simple lightweight accordion collapsible block.

## Installation

To install this plugin:

 1. Download the plugin
 2. Upload the plugin to the wp-content/plugins directory,
 3. Go to “plugins” in your WordPress admin, then click activate.
 4. Add the shortcode where you want the accordion to appear. Likewise in Gutenberg
    you can find the “Lightweight Accordion” block under the “widgets” section in the
    block selector.

## FAQ

### How do I add an “Expand all / Collapse all” button?

The plugin uses the native HTML details element, so a tiny snippet can toggle every
accordion on a page. Add a Custom HTML block (anywhere on the page) with the following
and adjust the two labels to taste:

    ```
    <button type="button" id="la-toggle-all">Expand all</button>
    <script>
    document.getElementById('la-toggle-all').addEventListener('click', function () {
      var open = this.textContent === 'Expand all';
      document.querySelectorAll('.lightweight-accordion details').forEach(function (d) { d.open = open; });
      this.textContent = open ? 'Collapse all' : 'Expand all';
    });
    </script>
    ```

Note that accordions using the “group” option stay exclusive (the browser only allows
one open per group).

## Reviews

![](https://secure.gravatar.com/avatar/704c911190879f2043deb8095d156eee317a6a2377d2c1581e7fb33c909218d8?
s=60&d=retro&r=g)

### 󠀁[excellent, lightweight plugin](https://wordpress.org/support/topic/excellent-lightweight-plugin-10/)󠁿

 [Marisa](https://profiles.wordpress.org/marisa2023/) 14 March, 2026

I greatly appreciate this plugin. It has helped me increase the screen real-estate
on my web pages by collapsing the help/information parts. Lightweight plug-ins which
don't slow down Wordpress are to be commended. I tried the built-in Wordpress accordion
element, but on my iPhone it could not be expanded.

![](https://secure.gravatar.com/avatar/41df14d8d0711bb39d2821836a2c8f2f1c99acb3af3242b01e996f85d7c9f0a0?
s=60&d=retro&r=g)

### 󠀁[Great job!](https://wordpress.org/support/topic/great-job-1403/)󠁿

 [Annejet Luik](https://profiles.wordpress.org/annejet/) 15 January, 2026 1 reply

Simple, lightweight plugin that does exactly what it promises. Clean UI, no unnecessary
options. Great job!

![](https://secure.gravatar.com/avatar/1e8a5ddfe2aa731dc342bf2f48876f3f02f5dbb1e71762d529fb6c7b32ac78d9?
s=60&d=retro&r=g)

### 󠀁[Nice little block](https://wordpress.org/support/topic/nice-little-block/)󠁿

 [tastymouse](https://profiles.wordpress.org/tastymouse/) 13 òktober, 2025

And easy to work with. Thanks

![](https://secure.gravatar.com/avatar/8bc1b7fa6ebe95087f1984ca51892350860fda3ead83a1a51675dfcd82db36bd?
s=60&d=retro&r=g)

### 󠀁[nice and easy to start with](https://wordpress.org/support/topic/nice-and-easy-to-start-with/)󠁿

 [steffifn](https://profiles.wordpress.org/steffifn/) 14 February, 2025

will be interesting to see how this works with over 100 entries

![](https://secure.gravatar.com/avatar/380665b6253bd6fe1191d6305ac78557d0b87a2a2534906a5b3bd68adb9f9c61?
s=60&d=retro&r=g)

### 󠀁[Superbe, exactly as described](https://wordpress.org/support/topic/superbe-exactly-as-described/)󠁿

 [Webtaurus](https://profiles.wordpress.org/and_or/) 16 January, 2025

Great versatile block! Simple and efficient.Thanks Andy

![](https://secure.gravatar.com/avatar/69b74a8b449201f3e9e4c562803d8ede0bb97bd5ad04af631f12d6a7cac673ea?
s=60&d=retro&r=g)

### 󠀁[It does exactly what it says](https://wordpress.org/support/topic/it-does-exactly-what-it-says-56/)󠁿

 [danielepais](https://profiles.wordpress.org/danielepais/) 24 novèmber, 2024

Absolutely spot on. Very useful and easy to use.

 [ Read all 60 reviews ](https://wordpress.org/support/plugin/lightweight-accordion/reviews/)

## Contributors & Developers

“Lightweight Accordion” is open source software. The following people have contributed
to this plugin.

Contributors

 *   [ Andy Feliciotti ](https://profiles.wordpress.org/someguy9/)

“Lightweight Accordion” has been translated into 7 locales. Thank you to [the translators](https://translate.wordpress.org/projects/wp-plugins/lightweight-accordion/contributors)
for their contributions.

[Translate “Lightweight Accordion” into your language.](https://translate.wordpress.org/projects/wp-plugins/lightweight-accordion)

### Interested in development?

[Browse the code](https://plugins.trac.wordpress.org/browser/lightweight-accordion/),
check out the [SVN repository](https://plugins.svn.wordpress.org/lightweight-accordion/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/lightweight-accordion/)
by [RSS](https://plugins.trac.wordpress.org/log/lightweight-accordion/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

#### 1.8.0

 * New ready-made block patterns under Accordions in the inserter’s Patterns tab:
   an FAQ section (with FAQ schema), an accordion group that keeps one section open
   at a time, and bordered accordions.
 * Fixed an accordion nested inside a grouped accordion joining the outer group,
   which made opening it close its own parent.
 * Fixed duplicated or copy-pasted accordion groups (or a pattern inserted twice)
   closing each other. Each group now gets a unique name on the page.
 * Fixed floated images inside an open accordion being cut off at the bottom (or
   overlapping the next accordion in some browsers).
 * Fixed the border settings added in 1.7.0 never appearing. The block now has working
   border controls (radius, color, width, style) in the Styles panel when the theme
   supports them.
 * Fixed the stylesheet loading on every page on classic themes running WordPress
   6.6 to 6.8. It now loads only on pages that show an accordion, in the head for
   accordions in the post content.
 * Fixed shortcode accordions in widgets, page builders and other places outside
   the post content showing unstyled.
 * Fixed `accordion_open="false"` and `bordered="false"` in the shortcode turning
   those options on.
 * Fixed the block’s HTML anchor being printed twice on WordPress 7.0 and newer.
 * FAQ schema: question names no longer contain HTML entities like `&amp;`, each
   question is listed once even if the theme renders the content twice, and accordions
   without a title are skipped.
 * The arrow and icons now match the 18px title text instead of the theme’s base
   font size, and the block’s font size setting reaches the title even when the 
   theme styles summary text.
 * Accordions next to a floated image now sit beside it as one box instead of running
   underneath it.
 * Title colors are now checked to be a single CSS color value, so the color settings
   can’t be used to add other CSS.
 * Removed the Accordion Group block’s HTML anchor field, which never worked.
 * Block registration uses the current `editor_script_handles` and `editor_style_handles`
   arguments.

#### 1.7.1

 * Tested up to WordPress 7.1.
 * Fixed the accordion block’s settings running together with no spacing in the 
   editor sidebar on WordPress 7.0 and newer.
 * The block editor script now loads its dependencies and version from the generated
   asset file, which includes the React JSX runtime the compiled script relies on.
 * Block editor strings are now translatable (text domain added and script translations
   registered).
 * FAQ schema answers no longer include stray whitespace left behind by block markup.
 * Added an FAQ entry with a snippet for an “Expand all / Collapse all” button.
 * Minimum required WordPress version is now 6.6, which introduced the React JSX
   runtime used by the block editor script.

#### 1.7.0

 * Smooth open/close animation using modern CSS (zero JavaScript, progressive enhancement
   in supporting browsers, respects reduced motion preference).
 * Native block support panels on the accordion block: spacing (margin & padding),
   typography (font size & line height), and border (radius, color, width).
 * WordPress 7.0 compatibility: blocks upgraded to Block API version 3 for the iframed
   editor, with editor styles now loading inside the editor canvas.
 * Deleting the last accordion in a group now removes the empty group instead of
   leaving a leftover box in the editor.
 * Removed a deprecated block attribute (`source: children`) flagged by the WordPress
   plugin checker.
 * Minimum required WordPress version is now 5.9 (the block editor integration uses
   APIs introduced there).
 * Tested up to WordPress 7.0.
 * New icon options: chevron, plus/minus, or none, with optional right alignment.
   Available in the block settings and via the `icon` and `icon_position` shortcode
   attributes.
 * Accordions now automatically open when targeted by a URL hash, so anchor deep
   links no longer land on a closed accordion. Disable with the `lightweight_accordion_anchor_script`
   filter.

#### 1.6.0

 * New feature: Accordion grouping – only one accordion can be open at a time within
   a group.
 * Added “Add Item” button in block toolbar to easily create grouped accordions.
 * Added `group` attribute for shortcodes to enable exclusive accordion behavior.
 * Added H5 and H6 title tag options.
 * Fixed deprecated `wp-editor` script dependency.
 * Security improvements for class and title tag sanitization.
 * Code improvements and bug fixes.

#### 1.5.20

 * Tested up to WordPress 6.7.

#### 1.5.19

 * Restore content display system to 1.5.16’s version.

#### 1.5.18

 * Bug fix for sanatizing titles.

#### 1.5.17

 * Tested up to WordPress 6.5.
 * Minified CSS files.
 * Security fixes to sanitize outputs.

#### 1.5.16

 * Tested up to WordPress 6.2.

#### 1.5.15

 * Security fixes to sanitize outputs.

#### 1.5.14

 * Tested up to WordPress 6.1.
 * Tweaked the readme to change “title_background” to “title_background_color”.

#### 1.5.13

 * Bug fix when using Lightweight Accordion inside a GeneratePress container.

#### 1.5.12

 * Small security enhancement.
 * New option ‘autop’ when using the shortcode to disable autop from processing 
   your accordion content.
 * New ‘lightweight_accordion_always_include_frontend_stylesheet’ filter to force
   inclusion of Lightweight Accordion CSS file on all pages.

#### 1.5.11

 * WordPress 6.0 bug fix when using Lightweight Accordion Block.

#### 1.5.10

 * Tested up to WordPress 6.0.

#### 1.5.9

 * Bugfix for PHP notice on line 22.
 * Added index.php file to directory for added security.
 * Added support for nested Lightweight Accordions by adding ‘[lightweight-accordion-
   nested]’ shortcode that can be used when adding an accordion inside of an accordion(
   this only affects shortcode users).

#### 1.5.8

 * Tested up to WordPress 5.9.
 * Added support for WPML translations.

#### 1.5.7

 * Tested up to WordPress 5.8.
 * Bug fix for __ declaration.

#### 1.5.6

 * Bug fix for copy and pasting the accordion title in Safari.

#### 1.5.5

 * Anchor support in Gutenberg and shortcode which adds an ID to be used as an anchor(
   can be found in the advanced tab of Gutenberg or using the ‘anchor’ attribute
   in the shortcode).
 * Fixes bug when enabling microdata using the filter (removes JSON-LD output when
   using microdata).

#### 1.5.4

 * FAQ schema for accordions now output as JSON-LD in the footer instead of as Microdata.
   If you’d like to continue using Microdata you can set the lightweight_accordion_output_microdata
   filter to true.

#### 1.5.3

 * PHP Warning bug fix for “class” and “className”.

#### 1.5.2

 * Empty array bug fix.
 * Included an example pane in the Gutenberg insert block page.

#### 1.5.1

 * Readme update.
 * Added block.json to be included in Gutenberg block library.
 * Style bugfix in the Gutenberg editor.

#### 1.5.0

 * New option to add a border around the accordion content on the front-end.
 * Shortcodes are now processed in the content of the accordion.
 * New filter to disable shortcode processing.

#### 1.4.1

 * Tested up to WordPress 5.7.

#### 1.4

 * New option for title and background color for the accordion tab (works with Gutenberg
   and shortcode).
 * New visual border to see what’s inside the accordion while using Gutenberg.
 * New ability to append a custom class to the main accordion div.
 * No longer runs content clean up processing (wpautop/preg_replace) to tab content
   when using Gutenberg.

#### 1.3.3

 * CSS style compatibility fix for some themes.

#### 1.3.2

 * Tested up to WordPress 5.6.
 * Bug fix in Gutenberg editor styles.

#### 1.3.1

 * Added a slight opacity change animation when opening accordions.

#### 1.3.0

 * Ability to add FAQ schema to a collapsible using the new ‘schema’ option in the
   shortcode or dropdown in the Gutenberg editor.
 * Bug fixes for PHP warnings.

#### 1.2.0

 * Better Gutenberg editor styles to tell what is inside a collapsible.
 * Tested up to WordPress 5.5.

#### 1.1.1

 * Bug fix: now runs wpautop() on the entire contents of the accordion (so the first
   paragraph won’t be missing a p tag now)

#### 1.1.0

 * New filter to denqueue the lightweight accordion CSS from the front-end.
 * add_filter(‘lightweight_accordion_include_frontend_stylesheet’, ‘__return_false’);

#### 1.0.0

 * Initial Release.

## Meta

 *  Version **1.8.0**
 *  Last updated **2 days ago**
 *  Active installations **10.000+**
 *  WordPress version ** 6.6 or higher **
 *  Tested up to **7.1.3**
 *  PHP version ** 7.0 or higher **
 *  Languages
 * [English (US)](https://wordpress.org/plugins/lightweight-accordion/), [German](https://de.wordpress.org/plugins/lightweight-accordion/),
   [Spanish (Chile)](https://cl.wordpress.org/plugins/lightweight-accordion/), [Spanish (Colombia)](https://es-co.wordpress.org/plugins/lightweight-accordion/),
   [Spanish (Ecuador)](https://es-ec.wordpress.org/plugins/lightweight-accordion/),
   [Spanish (Mexico)](https://es-mx.wordpress.org/plugins/lightweight-accordion/),
   [Spanish (Spain)](https://es.wordpress.org/plugins/lightweight-accordion/), and
   [Spanish (Venezuela)](https://ve.wordpress.org/plugins/lightweight-accordion/).
 *  [Translate into your language](https://translate.wordpress.org/projects/wp-plugins/lightweight-accordion)
 * Tags
 * [Accordion](https://pap-cw.wordpress.org/plugins/tags/accordion/)[block](https://pap-cw.wordpress.org/plugins/tags/block/)
   [blocks](https://pap-cw.wordpress.org/plugins/tags/blocks/)[collapsible](https://pap-cw.wordpress.org/plugins/tags/collapsible/)
   [performance](https://pap-cw.wordpress.org/plugins/tags/performance/)
 *  [Advanced View](https://pap-cw.wordpress.org/plugins/lightweight-accordion/advanced/)

## Ratings

 5 out of 5 stars.

 *  [  60 5-star reviews     ](https://wordpress.org/support/plugin/lightweight-accordion/reviews/?filter=5)
 *  [  0 4-star reviews     ](https://wordpress.org/support/plugin/lightweight-accordion/reviews/?filter=4)
 *  [  0 3-star reviews     ](https://wordpress.org/support/plugin/lightweight-accordion/reviews/?filter=3)
 *  [  0 2-star reviews     ](https://wordpress.org/support/plugin/lightweight-accordion/reviews/?filter=2)
 *  [  0 1-star reviews     ](https://wordpress.org/support/plugin/lightweight-accordion/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/lightweight-accordion/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/lightweight-accordion/reviews/)

## Contributors

 *   [ Andy Feliciotti ](https://profiles.wordpress.org/someguy9/)

## Support

Issues resolved in last two months:

     1 out of 1

 [View support forum](https://wordpress.org/support/plugin/lightweight-accordion/)

## Donate

Would you like to support the advancement of this plugin?

 [ Donate to this plugin ](https://www.buymeacoffee.com/someguy)