Skip to main content
Tab Accordion

A vertically stacked list of items where one item is expanded into a panel at a time

Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Accordions are often used to pack a lot of information in a much smaller space, most commonly used for FAQs (Frequently Asked Questions). As well as condensing content, it adds a bit of interactivity to your page.

Adding a Tab Accordion in Vev

Uploading an image

  1. Double-click the Tab Accordion section

  2. Click the pen icon on the Image placeholder

  3. Select Add image or choose an image from one of our free stock images libraries

Adding a new Tab

  1. Double-click the Tab Accordion section

  2. Click the + icon located at the bottom of the configurations panel

Navigate through the accordion tabs to customize the text and image for each tab.

Configuration options

Once you've added the Slideshow to your canvas, it's time to adjust the configurations. To start, double-click the component to open the configuration options.


โ€‹

Parameter

Description

Tab title

The text in the tab portion of each tab item. Always visible.

Image

The image placed in the expanded portion of the tab. (Only visible when the tab is opened)

Body

The text placed in the expanded portion of the tab. (Only visible when the tab is opened)

Easing

The speed of the tab's expanding/collapsing animation as the animation progresses.

Duration

The length of time it takes for the tab to transition between its expanded and collapsed states.

Tip: Notice that the URL of the browser changes when a particular tab in the Tab Accordion is opened. When a URL with the modified parameter is loaded, the respective tab in the Tab Accordion will automatically load in the opened state.

Organizing Tab Accordion sections

Once a Tab Accordion section has been added it'll appear in the layers panel, you can drag it above or below other sections to place it where you need it in your project. Follow the steps below to learn how to do it.

  • Select the section in the layers panel

  • Click and hold it

  • Drag it above or below the section you want

Did this answer your question?