Links

Accordion

Basics

An accordion block is a header that when clicked by the user, reveals associated 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 can be added to query, repeater and taxonomy terms blocks.
By default, the accordion block comes with an accordion headerblock (containing a heading)andanaccordion contentblock (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.
Add
  1. 1.
    Open the Inserter Panel
  2. 2.
    Search for the
    accordion block
  3. 3.
    Click on the block to insert it into your parent block

Accordion Settings

The accordion Settings tab is where the accordion properties are listed, such as whether the accordion should be open or closed on the front end, whether it is linked to an accordion block and the transition duration.

Colours

The Colours property allows you to personalise the Text, Link and Background colours of your accordion block.
Modify
  1. 1.
    Click on the ➕ ​​icon to open the Inserter Panel
  2. 2.
    Select the
    accordion block
  3. 3.
    Open the Block Inspector
  4. 4.
    Navigate to the Primary tab
  5. 5.
    Find Colours tab
  6. 6.
    Modify Text, Link, Background colours as required

Layout

The Layout determines the way your accordion block is set out including: flex properties and direction.
Modify
  1. 1.
    Click on the ➕ ​​icon to open the Inserter Panel
  2. 2.
    Select the
    accordion block
  3. 3.
    Open the Block Inspector
  4. 4.
    Navigate to the Primary tab
  5. 5.
    Find Layout tab
  6. 6.
    Modify Layout as required

Typography

The Typography property allows you to format and customise your text, and so determines the style and appearance of the written content in your accordion block.
Modify
  1. 1.
    Click on the ➕ ​​icon to open the Inserter Panel
  2. 2.
    Select the
    accordion block
  3. 3.
    Open the Block Inspector
  4. 4.
    Navigate to the Primary tab
  5. 5.
    Find Typography tab
  6. 6.
    Modify Typography as required

Margin and Padding

The Margin and Padding property allows you to specify the space inside and outside an element; the Margin property controls the space outside an element, and the Padding property controls the space inside an element.
Modify
  1. 1.
    Click on the ➕ ​​icon to open the Inserter Panel
  2. 2.
    Select the
    accordion block
  3. 3.
    Open the Block Inspector
  4. 4.
    Navigate to the Primary tab
  5. 5.
    Find Margin and Padding tab
  6. 6.
    Modify as required
  7. 7.
    Click dot(s) to reset