Accordion

The Accordion is a web design element that presents a vertically stacked list of headers, where clicking on a header reveals or hides the corresponding content underneath it. The default provides 3 headings and content containers, but you may add or remove as many as needed for your content.

Demo

Heading 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Instructions for use

While editing a page:

1. Move your cursor to the area of the page you wish to add the component.
2. Click the "Insert Snippet" button in the editor toolbar.
3. Select the Accordion snippet from the list.
4. In the inserted table, enter your headings in the "Title" column, and the coresponding content for each in the "Content" column.
5. If you wish to add or remove rows (i.e. add or remove accordions), click the table to select it. Use the table editing buttons that appear to add or remove rows
6. Click the "Save" button.