Accordion

Expandable pairs of question/answer or header/section fields.

Screenshot of the Accordion component with block labels


Designs:

To use the block:

  • Click the Layout tab at the top of your page
  • Scroll to the location on the page where you want to add a block
  • Click Add block
  • In the sidebar, click Create custom block
  • Choose the block to add.

Fill in the content fields:

  • Title (required): Displayed if Display title is checked; otherwise, this is for administrative use.
  • Section Subheading: The subheading of the accordion section.
  • Accordion Item: Add as many items as you like using the Add Accordion Item or Add new custom block button. When you are finished adding or editing each item, be sure to click Create/Update tab or Create/Update custom block to finalize the item. Each item contains:
    • Heading (required): The heading that will be used to expand/contract the accordion.
    • Body (required): The content of the accordion.
  • FAQ?: If this section contains Frequently Asked Questions, check this box to output them as structured data. Ensure the content contains individual sets of questions (e.g., “How old does my child need to be to swim at the YMCA?”) and answers (e.g., “The YMCA offers swim classes starting at age 3 and the pool is open to children of all ages with parental supervision”). Review Google’s Content guidelines for FAQs for more information. Only one FAQ should be added to a page. If more than one is added, only the first will be output to the structured data.

Then save the block:

Last modified March 11, 2025: feat: improve docs (3e852052)