Easy Accordion Block – Accordion, FAQ & Collapsible Content for the Block Editor vs Lightweight Accordion

Easy Accordion Block adds a native accordion block to the WordPress block editor, so you can build FAQ sections, product specifications, documentation, and collapsible content in minutes — without shortcodes, without a page builder, and without touching a line of code. It is built entirely with Gutenberg’s own components, so the controls feel like the rest of the editor and the output matches your theme automatically. 🌟 View Live Demos | Compare Free vs Pro Why choose Easy Accordion Block? Truly native – built with Gutenberg components, not a wrapper around an old jQuery plugin. Loads only where it is used – block assets are enqueued on the pages that actually contain an accordion. Accessible by default – real ARIA roles, full keyboard support, and screen-reader-friendly panels. Works with any theme – block themes, classic themes, and hybrid themes. Any content inside – put images, videos, buttons, columns, or any other block inside a panel. Accordion features Single or multiple panels open – decide whether one item stays open or several can be expanded at once. Allow all panels closed – let visitors collapse everything for a cleaner page. Open on page load – mark any item to render already expanded. Nested accordions – place an accordion inside a panel, with optional separate styling for the nested level. 130+ built-in SVG icons – pick separate icons for the expanded and collapsed state, on the left or the right. Heading icons – add an icon in front of any accordion title. Premade patterns – start from a ready-made design and edit it, instead of building from scratch. Design and styling Full responsive control – separate desktop, tablet, and mobile values for spacing and sizing. Normal, hover, and active states – style each state independently. Typography – font family, weight, size, line height, letter spacing, transform, and decoration. Borders, radius, padding, margin, box shadow – on the item, the header, and the panel. Theme colour palette support – colours stay consistent with the rest of your site. Accessibility Accessibility is a feature here, not an afterthought: Correct aria-expanded, aria-controls, and labelled panel regions. Full keyboard operation — Enter, Space, Up, Down, Home, and End. Unique, non-colliding IDs even with several accordions on the same page. Respects the visitor’s reduced motion preference. Panel content stays readable when JavaScript is unavailable, and expands automatically when the page is printed. Privacy Google Fonts are requested only when you actually choose one, and only in the weights you use. You can switch remote font loading off entirely with a setting or the esab_disable_google_fonts filter — useful for GDPR-sensitive sites. Perfect for FAQ pages · knowledge bases and documentation · product specifications · pricing and policy pages · course and lesson outlines · service descriptions · anywhere long content needs to collapse. Go further with Easy Accordion Block Pro The free plugin covers everyday accordions and FAQs. Easy Accordion Block Pro adds: FAQs block with FAQ schema markup – outputs valid FAQPage JSON-LD so your questions are eligible for Google rich results. Instant search – filter long FAQ lists as the visitor types. Load more – reveal items in batches instead of all at once. Open all / close all buttons – expand or collapse an entire set in one click. Three activators – open on click, on hover, or play through automatically. Badges – highlight individual items with a label such as “New” or “50% OFF”. Subheadings – add supporting text under any accordion title. Linked accordions – turn the title, the whole header, or an extra icon into a link. Disable specific items – lock an item so it cannot be opened on the front end. Custom icons – upload your own SVG or image instead of using the built-in set. Unfold block – fold long content behind a Show More / Show Less button.

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). 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 plugin will detect if the block or shortcode is used and enqueue the CSS. 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' );