Accordion content in the block editor

Easy Accordion Block Pro adds accordion and collapsible-content tools to the WordPress block editor. Use them for FAQs, documentation, product specifications, pricing and policy pages, course outlines, and service descriptions. Gutenberg components let you build panels in the editor without shortcodes, a page builder, or custom code. Panels can contain pictures, videos, buttons, columns, and other blocks. The output is designed to match the active theme and works with block, classic, and hybrid themes. Block assets load only on pages that contain an accordion.

FAQ search and structured data

The Pro FAQs block can output FAQPage JSON-LD, with schema controls at block level. Google retired FAQ rich results on May 7, 2026, so this markup no longer makes content eligible for that search appearance. Visitors can filter long FAQ lists as they type, while load-more controls reveal items in batches.

Panel behavior and item controls

Choose whether one panel or several can stay open, allow all panels to close, or set selected items to open when the page loads. Nested accordions can have separate styling for the nested level. Open-all and close-all buttons control an entire set. Choose click, hover, or automatic playback as the activator, and disable individual items so users cannot open them on the front end.

Add badges such as New or 50% OFF, or place a subheading beneath an item title. Link the title, the full header, or an additional icon. The block includes more than 130 SVG icons, with separate choices for expanded and collapsed states, left or right placement, heading icons, and premade patterns. Pro also lets you upload custom SVG or image icons.

Responsive styling and long content

Set spacing and sizing separately for desktop, tablet, and mobile. Configure normal, hover, and active states, along with typography, borders, radius, padding, margin, and box shadow for items, headers, and panels. Theme colour palette support helps keep the styling consistent with the rest of the website.

The Unfold block places long content behind Show More and Show Less controls.

Accessibility and page output

Accordions include ARIA attributes, labelled panel regions, and unique IDs for multiple accordions on a page. Visitors can use Enter, Space, Up, Down, Home, and End to operate and navigate the controls. The output respects reduced-motion preferences. Panel content remains readable when JavaScript is unavailable, and panels expand automatically when the page is printed.

Google Fonts are requested only when selected and only in the chosen weights. A setting or the esab_disable_google_fonts filter can disable remote font loading.

Insert an accordion

Edit a WordPress page, open the plus inserter, and search for Accordion. Add a heading for each item, then place the desired blocks inside its panel. For an FAQ section, make one item per question and use the Pro FAQ tools to organize and filter the list.