Accordion block

What do web editors use an accordion block for?

When there is a lot of text to put on a page, organizing the material into items that can be condensed down into easily digestible sections. Accordions are an easy and user-friendly way to help a user select the information they need without overwhelming them with a lot of text. Text is tucked into accordion “folds,” which fly open when a user clicks on the accordion title. Accordions also close when a user clicks on the title a second time. These can be very beneficial for a FAQ format, when there are specific categories of products or services, and additional uses.

Which layout can accordion blocks be used in?

Accordion blocks can be used in a one or two column layout. They are not allowed to be on sections with a coloured background.

Who can use accordion blocks?

Super Builder can create and edit accordion blocks. Builders can edit existing accordions but cannot create new ones.

Accordion block tutorial Accordion block example

Accordion block tutorial

Step-by-step instructions

Choose “Accordion” in the add custom blocks menu.
Title: This is an administrative title that will be used to identify the block and not displayed on the website.
Header: The is an optional field to display a header above the text grid items.
- Header will be set as an H2 by default but you have the option to change it. Note: Only use H1 if this is being used as a header/title for the page. H2 for any section header. H3 to break up content within the section. Never mix and match header sizes, this will confuse screen readers and make the site less accessible.
- You will have a choice of heading colours depending on the choice of background colour selected.
Accordion items:
- Accordion Item Title: This is the field that will display as the title of the accordion item for the user to click on to expand the item.
- Columns: This is where you can select the text grid to be auto formatted into one to four columns.
- Divider: Option to add a divider line at the bottom of each text grid item.
- Text Grid: This is where you will add the text grid items. Each text grid item will allow you to add a header, body and button and will display in columns if you selected columns above.
  - Header: Optional header field within the text grid that will display above the body.
    - Header will be set as an H2 by default. Note: If you used a Header above the text grid items you will want to change this header to an H3.
  - Body: This is an optional field to display a chunk of text using a WYSIWYG (what-you-see-is-what-you-get) text editor where you can type or copy paste text into. If you copy paste make sure you always clean the formatting after you paste. Do this by highlighting the text and clicking on the clear formatting icon (T_x) on the top ribbon. This will remove any unnecessary formatting copied over from a word doc or pdf file.
  - Button: This is where you have the option to add up to four buttons. Style options will change depending on the background colour chosen.
    - For internal links: start typing the name of the page or media item (pdf) in the URL field and select the page you want to link to.
    - For external link: copy paste the external link.
    - Type in the link description into the link text field.
    - For external links or pdf files: click on attributes and select new window for the target.
  - Add another text grid item to add another item to this accordion section or add another accordion section to create a new accordion section. Repeat steps above for each accordion section.
Click on "Add block" or "Update" to save the block.

Accordion block example

Inner content header (H3)

This is just placeholder text. Don't be alarmed, this is just here to fill up space since your finalized copy isn't ready yet. Once we have your content finalized, we'll replace this placeholder text with your real content.