Description
The Accordion Block is a combination of a containing parent block with a bar layout, and a child slideout block that allows you to build out layouts inside.
Not to be confused with the Slideout Block (but they are similar!), this block with its nested containers allows you to build layouts inside the slideout section. These are activated when a user clicks to expand them. The key practical use is for full-width content, often text-heavy details that would overwhelm a user and create too much scroll on mobile if viewed all at once. Think FAQs, product specs, or policies.
The Accordion Block allows you to include everything a customer or client might need to know on the page, without hurting the user experience with visual overwhelm. Content nested in an accordion is still visible to search engines, so it doesn’t impact your SEO.
Screenshots
Slider Block (Parent)
Slider Item Block (Child)
Settings – Accordion Block
Accordion Settings
First Accordion is Open
This toggle controls whether the first accordion item is already open when a user loads the page. When enabled, the item is open/expanded. When disabled, all accordion items are closed. You might choose to set the first item open if you want to give the user a clear indication that this section of the page has nested content.
Accordion Spacing
Content Padding
The setting allows you to add or reduce spacing around the outsides of all sections in the accordion, relative to the label (see next section for more on labels). In plain terms, this is the padding around the part of the accordion that expands and collapses, the hidden content. There is one toggle each for adjusting padding on top, to the right, on the bottom, and on the left of your accordion sections. More about Padding.
Label Padding
This setting allows you to add or reduce spacing around the outsides of the label, relative to the slideout content. The label is the visible copy that sits atop the accordion content area. In FAQs, for example, the label would be the question, and a person would click to expand the answer. There is one toggle each for adjusting padding on top, to the right, on the bottom, and on the left of your accordion label. More about Padding.
Margin
This setting allows you to add or reduce spacing around the outsides of your complete accordion sections (the label and content combo). This is the space around each section, relative to the next section or boundary of the accordion block. There is one toggle each for adjusting padding on top, to the right, on the bottom, and on the left of your accordion. More about Margins.
Icons
The default clickable icons for an accordion are an upward arrow (accordion content open) and downward arrow (accordion content closed). ‘Rotating +’ will give you a + symbol when the accordion is closed, and it rotates to look like an ‘x’ when the accordion is open. If you choose ‘Custom Open/Close’ you will see additional fields open to enter Font Awesome icon shortcode. More about Font Awesome shortcodes.
Typography
Heading Style
This dropdown allows you to select a heading style for the accordion label. This is based off settings under Foundry > Global Styles.
Text Style
This dropdown allows you to select one of text styles for the ‘extra info’ portion of your accordion label. This is based off of settings under Foundry > Global Styles.
Colour Settings
Colour
This setting allows you to customize the colour of the font of your accordion content. The options will be colours from your palette(s), as configured in Foundry > Global Styles. More about Colours.
Background
This setting allows you to customize the colour of the box containing your accordion content.
Label Colour
This setting allows you to customize the colour of the font for your accordion label. More about Colours.
Label Background
This setting allows you to customize the colour of the box containing your accordion label.