Accordion Block

Accordion block allows users to add item titles and their content; there’s no limit on how many we can add. Below are several accordions.

Visual Representation of How to Add Accordion Block

How to Add Accordion Block

  1. Log into your WordPress.com dashboard.
  2. Navigate to Pages or Posts and click the page/post you want to add the content to.
  3. Click the “+ Block Inserter” icon.
  4. Search for “Details block” (or “Toggle” or “Accordion”, which will also bring up the Details block in the search results).
  5. Click the block’s icon to add the block to the post or page:

Ways to use Accordion Block

  1. Once the block is added, we add the title and content for it
  2. After that, use block setting panel to configure it further. Below are the configuration options:
    • background color
    • text color
    • “display as open” option

Details Block

The Details block is a block that allows you to include content hidden under a parent block with a text summary. This works like an accordion, with the text summary expanding to show nested content.

How to Add Detail Block

  1. Log into your WordPress.com dashboard.
  2. Navigate to Pages or Posts and click the page/post you want to add the content to.
  3. Click the “+ Block Inserter” icon.
  4. Search for “Details block” (or “Toggle” or “Accordion”, which will al

Ways to use Details Block

  1. Once the block is added, we add the title and content for it
  2. After that, use
    • background color
    • text color
    • “display as open” option

Additional Configuration Settings

Block Toolbar

The Details block has the following options in its toolbar:

  • Change block type.
  • Drag the block.
  • Move the block up or down.
  • Align to wide or full-width.
Set Details Block to Open by Default

To display your hidden content by default on the page, you can use the Open by default option. To enable this feature set the toggle next to Open by default to On.

Sample Accordion/Detail Block Views


Sample Closed Accordion Block
Yes!
Open Accordion Block Sample

Sample accordion

Accordion with Background color

Sample Detail Block

This is a sample text