Vev Help Center
Search…
Tab Accordion
A vertically stacked list of items where exactly one item is expanded into a panel at a time. This element aids in reducing information overflow.

Configuration Options

Parameter
Type
Description
Tab title
Text
The text in the tab portion of each tab item. Always visible.
Tab content > image
Image
The image placed in the expanded portion of the tab. Only visible when the tab is opened.
Tab content > body
Text
The text placed in the expanded portion of the tab. Only visible when the tab is opened.
Easing
Easing type
The speed of the tab's expanding/collapsing animation as the animation progresses.
Duration
Number
The length of time it takes for the tab to transition between its expanded and collapsed states.

Adding an Accordion Item

Double clicking on the Tab Accordion section opens the section's settings modal. Clicking the + button will add a new item to your existing accordion. The visual below shows the mapping of each field in the settings modal to the element's UI.

Styling Options

Tab Color

In the Editor Styles panel, locate and configure the Background > Title item to set the tab color. Similarly, setting the color for the Background > Active Title item will set the tab color for when it is in its expanded state or when it is hovered by the user's cursor.

Panel Color

In the Editor Styles panel, locate and configure the Background > Panel item to set the tab panel's background color.

Content Background

The Tab Group defines the set of all tabs within the section. To set the background color of this content, locate and configure the Background > Tab Group item in the Editor Styles panel. Note that this only sets the background of the portion of the section containing the tabs. To set the background of the entire section configure the Background > Container item instead.

Font Styling

Font and font color can be uniquely configured for the Tab Title, Active Tab Title, and Panel items. All of these fonts can be configured under the Text category in the Editor Styles panel. In addition, the Icon item in the Text category allows you to set the color and size of the open(+) and close(x) icons in the tabs.

Image Size

Customize the width and height of the image inside the tab panel using the Transform > Image item found in the Editor Styles Panel. The width and height for all images in each tab panel will be affected.

Add Spacing Between Individual Tabs

The Margin property adds empty space outside of the item's container. Configure the Margin > Tab item to add spacing around the outside of each tab in the tab accordion. The fields in the Margin property map to the top, right, bottom. and left margins of the item.

Add Spacing Around the Tab Accordion

The Padding property adds empty space between an item and its container. Use the Padding > Tab Group item in the Editor Styles panel to add spacing around the entire Tab Accordion.
Since the Tab Accordion is a section, the Tab Accordion cannot be freely positioned the way elements inside a section can be. Adding a padding around the Tab Group item can offer some freedom in the positioning and dimensions of the Tab Accordion.

Panel Layout

Each tab's panel can consist of an image and a text body. The layout of these two items can be modified by configuring the Layout > Panel item in the Editor Styles Panel. Playing around with the different combination of options in this style property is the best way to discover the possible arrangements.

Link Sharing (Editor-external feature only)

On live/published pages, notice that the URL of the browser changes when a particular tab in the Tab Accordion is opened. This allows users to copy the URL and share it with others. When a URL with the modified parameter is loaded, the respective tab in the Tab Accordion will automatically load in the opened state.
Last modified 7mo ago