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 to your component options until you see Multi Tabs / Accordion.

Drag the component to your content pane.

Example below: Accordion dragged to content pane.

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

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

Left click on the accordion component.

Click the wrench icon for "Configure".

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.

14\. 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: 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.