Build panels with the block editor

Easy Accordion Block Pro adds accordion and collapsible-content tools for FAQs, documentation, product specifications, pricing and policy pages, course outlines, and service descriptions. Gutenberg components let you make panels in the editor without shortcodes, a page builder, or custom code. Panels can contain images, videos, buttons, columns, forms, 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 controls determine how long lists appear

The Pro FAQs block outputs FAQPage JSON-LD for question-and-answer content. Google retired FAQ rich results on May 7, 2026, so this markup does not make a page eligible for that search feature. Instant search filters FAQ entries as visitors type, while load-more controls reveal items in batches.

• Add open-all and close-all controls for an accordion set.
• Choose click, hover, or automatic playback as the activator.
• Label individual items with badges such as “New” or “50% OFF.”
• Add a subheading beneath an accordion title.
• Link the title, the full header, or an additional icon. Pro entry anchors can also expand an item and scroll to it when a visitor follows its link.
• Disable selected items so they cannot be opened on the front end.
• Upload custom SVG or picture icons.
• Use the Unfold block to place long content behind Show More and Show Less controls.

Opening behavior follows the selected settings

Choose whether one panel or several can stay open, allow all panels to close, or set selected items to open when the page loads. Accordions can be nested, with optional separate styling for the nested level. More than 130 built-in SVG icons are available, with separate choices for expanded and collapsed states and left- or right-side placement. Add heading icons or start from premade patterns.

Appearance varies by device and interaction state

Set separate spacing and sizing values for desktop, tablet, and mobile. Style normal, hover, and active states, including 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 site.

Output behavior covers keyboard use, scripts, and print

The block includes ARIA attributes, labelled panel regions, keyboard operation with Enter, Space, Up, Down, Home, and End, and unique IDs for multiple accordions on one page. It respects reduced-motion preferences. Panel content stays readable when JavaScript is unavailable, and all panels expand while printing, with interactive controls hidden.

Google Fonts are requested only when selected and only in the chosen weights. Remote font loading can be disabled through a setting or the esab_disable_google_fonts filter.

Add an accordion in the editor

Edit a WordPress page, open the plus inserter, search for Accordion, and insert the block. Add a heading for each item, then place blocks inside its panel. Use Add Accordion Item to create more entries. For an FAQ section, add one item per question and use the Pro FAQ tools to organize and filter the list.