Accordion block

Accordions display collapsible sections of content, each with a clickable header that expands or collapses the content within. In this guide, you will learn how to add, customize, and use the Accordion block on your WordPress.com site.

Use accordions to organize information, reduce page length, and let visitors focus on the content that matters most to them. Accordions work well for organizing content that visitors may want to browse selectively. Here are some popular ways to use them:

• Terms and policies: Present legal or policy information without overwhelming visitors.
• FAQs: Group frequently asked questions with expandable answers.
• Product details: Display specifications, sizing guides, or shipping information in collapsible sections.
• Step-by-step instructions: Break down tutorials or guides into digestible steps.
• Event schedules: Organize agendas or itineraries by time or session.
• Team bios: Show brief introductions with expandable details about each team member.

Follow these steps to add the Accordion block to a page or post:

1. Visit your site’s dashboard.
2. Navigate to Pages or Posts and click the page/post you want to add the accordion to.
3. Click the + block inserter icon.
4. Search for “Accordion block” and click it to add the block to the post or page:

For more information, visit our detailed instructions on adding blocks.

When you first add the Accordion block into your post or page, you will have the following sections:

• Accordion item: Each collapsible section, containing a heading and panel.
  • Accordion heading: The clickable title that expands or collapses the content within.
  • Accordion panel: The content revealed when the header is clicked.

To complete your accordion:

1. Add your title or heading text that you want visible at all times.
2. Click inside the Accordion Panel area, or use List View to select it.
3. Click the + block inserter to add blocks within the accordion panel area. You can add any type of content, including text, images, videos, and other blocks.

The Accordion block includes settings that control how the accordion behaves. To access these settings, select the parent Accordion block using List View and open the block settings in the right sidebar.

When “Inner blocks use content width” is switched on, blocks inside the Accordion block will adhere to these width settings:

• Content: The width of the content area for blocks not set to wide or full-width.
• Wide: The width of the content for blocks set to wide width.

When enabled, opening one accordion item automatically closes any other open items. This keeps your content tidy and ensures visitors focus on one section at a time.

Toggle the expand/collapse icon (usually a “+” or arrow) that appears next to each accordion header. Disable this option for a cleaner, minimal look.

Choose whether the icon appears on the left or right side of the accordion header.

You can set specific accordion items to display as expanded when the page loads. To do this, follow these steps:

1. Use List View to select the Accordion Item block you want to open by default.
2. In the block settings sidebar, enable the “Open by default” option.

In the block settings sidebar, click on the Styles icon to access the design settings for the block. The Styles icon is in the shape of a circle, with half of the circle filled in:

Available options include:

• Colors: Set background and text colors for accordion headers and panels.
• Background image: Add a background image to the overall parent Accordion block.
• Typography: Adjust font size and style for the text.
• Dimensions: Control padding and margins around accordion items.
• Border & shadow: Add a border and shadow effect to the accordion.