Using the Text Accordion element

A component that organizes content within collapsable containers

Lewis Bowen avatar
Written by Lewis Bowen
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.

Text Accordion in Vev

Adding a text accordion

  • From the top menu bar, click on the Add Menu (Shortcut: M)

  • Search for and select 'Text Accordion'

  • Drag and drop the element onto your canvas

Adding a New Tab to Your Accordion

  • Double-click the Text Accordion

  • Click the + icon located right above the Animation section

A new tab will appear, you can navigate through them to adjust them as needed.


Styling a text accordion

  • Background:

    • Container: Change the element's container background color.

    • Header: Change the Tab's background

    • Header Active: Change the Tab's background when active

    • T: Change the Tab's body container background

  • Text:

    • Header: Style the Tab's header

    • Header Active: Style the Tab's header when the current Tab is the active one

    • T: Style the Tab's body text

    • IC: Change the icon's size and color

    • Link: Style the Read more link

    • Link Hover: Style the Read more link on hover

  • Margin: Add margin to the Tabs, Icon, and the Link

  • Padding: Add padding to the element's container, Header and the Body Text

  • Layout: Arrange the Direction and Distribution of the elements in the Tab's header

  • Icons:

    • Set custom shape: Replace the preloaded icons with a shape or a custom SVG

    • Set custom image: Replace the preloaded icons with an image

Configuration options

Once you've added the Text Accordion element to your canvas, it's time to adjust the configurations settings. Start by double-clicking the element to open the configuration panel.




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


The body text inside the tab.

Read more link

Link at the bottom of the tab (optional)

Link Type

Dropdown menu where you can choose the link type (Page, Element, External, Email, Phone, File).


The acceleration of the transition animation


the length of time it takes for the animation to be completed (milliseconds).

Show Icon

Toggle to show the icon on the tab's right side.

Rotate Icon

Toggle to make the icon rotate when clicking on a tab.

Did this answer your question?