Vertical Tabs

The Vertical Tabs component is a web design element that presents a vertical list of headers, where clicking on a header reveals the corresponding content to the side of the header list. It is similar to an accordion but presents your content in a different format. Additionally, the content for the first heading is always visible when the page loads. The default provides 3 headings and content containers, but you may add or remove as many as needed for your content.

Demo

Heading 1Heading 2Heading 3

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 Vertical Tabs 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, click the table to select it. Use the table editing buttons that appear to add or remove rows
6. Click the "Save" button.