Accordions

To add accordions to your website:

Navigate to the page, news article, or event.

Choose layout.

Select the "Add block" link from the section of your site.

Choose the "Create Custom Block" button.

Choose Accordions from the list of custom blocks.

The title is required but it's display is not.

Choose "Add new accordion panel".

The "Accordion Header" field is required as this is the text that will appear on the unexpanded accordion.

The "Accordion Panel" field is a rich content editor through which you can add text, links, and media.

Once you are satisfied with your accordion, press the "Create Accordion panel" button.

You may add as many accordions as you like, just be cognizant of space and context.

You can reorder the accordions through the "sort order" cross icons.

Once you have created your accordions the default display is to allow only one accordion to be open at a time. The following accordion block is configured in this manner. Experiment with this configuration to see if it suits your use.

This checkbox will allow a site visitor to expand the accordions without the previously expanded accordion collapsing. This settings has been applied to the following accordion block. Experiment with it's functionality to see if it fits your use case.

This checkbox allows the first accordion to display in it's expanded state. This can either be in conjunction with the "Allow Multiple Accordions to Be Open" checkbox or without it. The following accordion block shows the former option.

This configuration allows all of the accordions to be exapanded upon visiting the page. It requires that the "Allow Multiple Accordions to Be Open" checkbox is selected in conjunction with the "Start With All Items Open" checkbox selected. The following accordions block showcases this option.

Engineering Web Services configured a range of custom classes. When applied to accordions they allow refinement of presentation. Please see a list of the options on the Custom Blocks Custom Classes page. Examples of each follow this block of content.