Adding a tab accordion

Styling a tab accordion

Configuration options

Organizing tab accordion sections

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

👍🏽 Adding a tab accordion

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

  • Search for and select 'Tab Accordion'

  • Select the component and navigate to the top or bottom of the canvas then click Add section here

Adding a tab accordion section

Uploading an image

  • Double-click the Tab Accordion section

  • Click the pen icon on the Image placeholder

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

Adding a new Tab

  • Double-click the Tab Accordion section

  • 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.

🎨 Styling a Tab Accordion

  • Spacing top: Add padding to the top of the section in pixels or % to keep spacing between sections

  • Spacing bottom: Add padding to the bottom of the section in pixels or % to keep spacing between sections

  • Width: The width of a Horizontal Scroll section can't be altered, it'll always be set to cover the 100%

  • Height: Set the height of the section in Pixels, % or set it to Auto so that it grows as you add content to it

  • Min H: Sets the minimum amount of height pixels a section can be. A red stippled horizontal line inside your section will reflect the minimum height

  • Clip content: Toggle to hide the content that goes beyond the section's edges

  • Resize to fill vertically: Click to set the section's height to 100%

  • Background:

    • Container: Change the background color of the whole section

    • SE: Change the background color of the content section

    • AC: Set the Tab Title's section color when active

    • TA: Change the Tab Title's section color

    • Tab Content: Change the background color of the Tab content's section

  • Text:

    • AC: Style the Active Tab's title (the text in the tab portion of each tab item)

    • TA: Style the Tab's title (the title located inside the tab)

    • Tab Contents: Style the body text

    • IC: Change the color of the minus (-) icon

  • Margin: Add margin to the tabs and images

  • Padding: Add padding to the Section Content, Tab Title, and Tab Content

  • Effects: Add different types of shadows or blur effects. Learn more about effects

  • Transform: Set the image's width and height

  • Layout: Set the direction and distribution of the elements inside the tab (Body text, and image)

  • Icons:

    • Set custom shape: Replace the network's logo with a shape or a custom SVG

    • Set custom image: Replace the network's logo with an image

Styling Tab Accordion

Aspect Ratio

Specifying and locking the aspect ratio of a section will allow you to adjust and resize it while maintaining the overall relationship between height and width.

Aspect Ratio for Slideshow

Tip: Right-click the aspect lock to open up a menu of popular aspect ratios.

⚙️ Configuration options

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

Tab Accordion 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?