An accordion block is a header that when clicked by the user, reveals hidden content.

The accordion block is usually used to display "text heavy" content such as FAQs (frequently asked questions) or to manage the display of different content in your page without crowding the user's viewpoint.


You can modify and personalise the appearance of your accordion block using the properties in the primary tab: settings, colours, layout, typography, margins and padding.

The accordion block is very versatile and can be added to query, repeater and taxonomy terms blocks.

Header and Content

By default, the accordion block comes with an accordion headerblock (containing a heading)andan accordion content block (containing a paragraph) so you can visually see the accordion block in the editor.

The heading block and the paragraph block can be replaced by any other block.

If you click on the accordion heading, the content appears in the editor.


  • Select a block that can receive an accordion block.

  • Click the "+" icon in the Quick Inserter.

  • Click the accordion icon to insert an accordion block into your parent block.

You will now see that the Accordion block has been inserted and is made up of the Accordion Header and Accordion Content block.

Last updated