Accordion

Use the accordion component to display a set of items within an accordion on your web page.

Add the component to your page

When you are editing your page using page-builder:

  1. Add a component to your page by clicking the widgets Add component button or by adding a content block (by clicking the add_circle button) then clicking the add component button.

  2. Locate the accordion Squiz core component within the component browser and then click the select button.

    accordion component select

  3. This will add the accordion component to your page.

Configure the accordion component

Accordion content and settings

accordion fields
  1. Add: The add_circle Add button allows you to add additional items to your accordion. When the component loads you will have an unpopulated item that you can fill in (see [item-configuration])

  2. Heading level: This allows you to choose the heading level for the item title.

  3. Auto-collapse when another is expanded: This setting controls if other accordion items will auto-close if you select a different item.

  4. Show expand/close all button: This controls whether a button to open or close all accordion items is provided.

accordion item fields
  1. delete_forever: The delete button will remove the event from.

  2. Title: Enter the title for your card.

  3. Content: Enter the content that will be displayed for this accordion item.

  4. Expanded by default: Controls if the accordion item is displayed in the open state when the page loads.