Title: Accordion block
Author: annezazu
Published: December 2, 2025
Last modified: November 27, 2025

---

# Accordion block

## In this article

 * [Requirements](https://wordpress.org/documentation/article/accordion-block/?output_format=md#requirements)
 * [Add the Accordion block](https://wordpress.org/documentation/article/accordion-block/?output_format=md#add-the-accordion-block)
 * [Add, edit, and reorder Accordion Items](https://wordpress.org/documentation/article/accordion-block/?output_format=md#add-edit-and-reorder-accordion-items)
 * [Block toolbar](https://wordpress.org/documentation/article/accordion-block/?output_format=md#block-toolbar)
 * [Block settings](https://wordpress.org/documentation/article/accordion-block/?output_format=md#block-settings)
 * [Accordion inner blocks](https://wordpress.org/documentation/article/accordion-block/?output_format=md#accordion-inner-blocks)
 * [Tips](https://wordpress.org/documentation/article/accordion-block/?output_format=md#tips)
 * [Accessibility](https://wordpress.org/documentation/article/accordion-block/?output_format=md#accessibility)
 * [Demo](https://wordpress.org/documentation/article/accordion-block/?output_format=md#demo)
 * [Frequently asked questions](https://wordpress.org/documentation/article/accordion-block/?output_format=md#frequently-asked-questions)
 * [Changelog](https://wordpress.org/documentation/article/accordion-block/?output_format=md#changelog)

[ Back to top](https://wordpress.org/documentation/article/accordion-block/?output_format=md#wp--skip-link--target)

The Accordion block lets you show content in collapsible sections so visitors can
expand just the parts they need. It’s commonly used for FAQs, schedules, or any 
long page you want to make easier to scan. Each Accordion contains Accordion Item
blocks. Every item has:

 * Accordion Heading: the clickable title.
 * Accordion Panel: the content that expands and collapses. You can add any blocks
   in the panel.

## 󠀁[Requirements](https://wordpress.org/documentation/article/accordion-block/?output_format=md#requirements)󠁿

 * WordPress 6.9 or later.

## 󠀁[Add the Accordion block](https://wordpress.org/documentation/article/accordion-block/?output_format=md#add-the-accordion-block)󠁿

 1. Open a post or page in the editor.
 2. Select where you want the accordion to appear.
 3. Open the block inserter (+) and search for “Accordion.”
 4. Select Accordion to add it to your content.

## 󠀁[Add, edit, and reorder Accordion Items](https://wordpress.org/documentation/article/accordion-block/?output_format=md#add-edit-and-reorder-accordion-items)󠁿

 * Add a new item: Click the + Add accordion item button inside the block (or use
   the inserter at the end of the list).
 * Edit a heading: Click the Accordion Heading and type a short, descriptive title.
 * Add content: Click inside the Accordion Panel and add any blocks you need (paragraphs,
   images, lists, etc.).
 * Reorder items: Use the move handles in the toolbar or drag items in List View
   to change the order.
 * Expand/collapse while editing: Click a heading to toggle the panel open or closed
   so you can focus on one item at a time.

## 󠀁[Block toolbar](https://wordpress.org/documentation/article/accordion-block/?output_format=md#block-toolbar)󠁿

When you select:

 * Accordion: You’ll see alignment and positioning controls, plus handles to move
   the entire accordion.
 * Accordion Item: You’ll see move/drag controls and basic formatting for the heading.
   Use List View to quickly select the Heading or Panel inside an item.

## 󠀁[Block settings](https://wordpress.org/documentation/article/accordion-block/?output_format=md#block-settings)󠁿

**Open by default**

When on, Accordion content will be displayed by default.

**Auto-close**

When on, this will automatically close accordions when a new one is opened.

**Show icon**

When on, an icon will display with an additional option to select it to display 
on the right or left side.

**Styles**

Depending on your theme, you may see controls for colors, typography, borders, and
spacing. These affect the overall look of headings and panels.

**Advanced**

 * HTML anchor: Create an anchor you can link to (for example, faq#shipping).
 * Additional CSS class(es): Add a class for custom styling.

## 󠀁[Accordion inner blocks](https://wordpress.org/documentation/article/accordion-block/?output_format=md#accordion-inner-blocks)󠁿

The Accordion block is made of a few blocks to pull the feature together:

 * Accordion item
 * Accordion panel

These inner blocks may include additional style controls depending on your theme(
colors, typography, spacing). For the Accordion item, you can pick the semantic 
heading level for the item’s title (for example, H3, H4). Use levels that fit your
page outline.

## 󠀁[Tips](https://wordpress.org/documentation/article/accordion-block/?output_format=md#tips)󠁿

 * Keep headings short and descriptive so visitors know what each item contains.
 * Use consistent heading levels across items (for example, all H3s) that fit your
   page’s heading structure.
 * For long content, consider splitting items into smaller sections or using lists
   inside the panel.
 * Save frequently used accordions (like an FAQ) as a Pattern so you can reuse them
   across your site.

## 󠀁[Accessibility](https://wordpress.org/documentation/article/accordion-block/?output_format=md#accessibility)󠁿

 * The Accordion block follows accessible patterns so headings act as buttons and
   panels announce their expanded/collapsed state to assistive technologies.
 * Best practices:
    - Use meaningful, concise headings.
    - Avoid placing interactive elements (like links or buttons) inside the heading
      itself; put them in the panel.
    - Choose heading levels that follow your page hierarchy.

## 󠀁[Demo](https://wordpress.org/documentation/article/accordion-block/?output_format=md#demo)󠁿

## 󠀁[Frequently asked questions](https://wordpress.org/documentation/article/accordion-block/?output_format=md#frequently-asked-questions)󠁿

**What’s the difference between Accordion and Details?**

 * Details creates a single collapsible section. Accordion is a list of coordinated
   collapsible items with options to allow one or multiple open at once.

**Can I open more than one item at the same time?**

 * Yes. Turn on “Allow multiple items to be open” in the Accordion block settings.

**How do I make a specific item open by default?**

 * Select the Accordion Item, then enable “Initially open” in its settings.

**Can I add any blocks inside an Accordion Panel?**

 * Yes. Panels can contain any blocks, including images, lists, and embeds.

## 󠀁[Changelog](https://wordpress.org/documentation/article/accordion-block/?output_format=md#changelog)󠁿

 * Created 2025-12-02

## Was this article helpful? How could it be improved? 󠀁[Cancel reply](https://wordpress.org/documentation/article/accordion-block/?output_format=md#respond)󠁿

[Log in to submit feedback](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fdocumentation%2Farticle%2Faccordion-block%2F&locale=en_US).
If you need support with something that wasn't covered by this article, please post
your question in the [support forums](https://wordpress.org/support/forums/).

First published

December 2, 2025

Last updated