Virginia Tech® home

Accordions:How-To

Navigate to the page you wish to edit in Ensemble.

Click "Toggle Side Panel".

Make sure the Components tab is selected.

Scroll down your Components options until you see Multi Tabs / Accordion.

Drag the component to your content pane.

A screenshot showing the multi-tab/accordion component with emphasis.

Example below: Accordion dragged to content pane.

A screenshot that shows a Multi Tab / Accordion component dragged into the main content pane.

Drag over the component you wish to have inside of the accordion. Typically this will be a text component.

A screenshot showing the side panel open, with the Components tab active, and the Text component emphasized with the mouse cursor.

Example below: A text component has been dragged into the accordion.

A screenshot showing a Text component dragged into the Multi Tabs / Accordion component.

Left click on the accordion component.

A screenshot showing emphasis on where to left-click on the Multi Tabs / Accordion component.

Click the wrench icon for "Configure"

A screenshot emphasizing the wrench icon for configuration options for the multi tabs / accordion component.

Under Headings, click "Add".

Put in a heading for the accordion. This will be what the user sees before opening the accordion.

Click the checkmark to accept the heading.

Example below: Accordion with newly input heading.

Drag over a text component into the accordion and add your content to that. 

To test your accordion, click "Preview" in the upper-right.

Tip: For multiple accordions, drag over another Multi Tabs / Accordion component and repeat the steps as above. This will save you time in the future if the accordions need to have their order of appearance changed.