The Tab Accordion is a component that organizes content into a vertically stacked list of items. Only one item (or tab) can be expanded at a time, allowing you to fit a large amount of information into a small space. Tab Accordions are excellent for FAQs and make your page more interactive for users.
Adding and Editing a Tab Accordion
To customize a Tab Accordion, you must first double-click the component on the canvas. This will open the configuration panel on the right side of the editor.
How to Upload an Image
Each tab in the Tab Accordion can contain an image. To add an image to a tab:
Double-click the Tab Accordion component to open the settings panel.
Click the pen icon on the image placeholder for the desired tab.
Choose to "Add image" from your computer or select one from the free stock image library.
How to Add a New Tab
To add a new collapsible tab to your Tab Accordion:
Double-click the Tab Accordion component to open the settings panel.
Click the + icon at the bottom of the panel.
Go through each tab to customize its title, body text, and image.
Configuration Options
Once the configuration panel is open, you can adjust the following settings for each tab:
Tab title: This is the text that is always visible on the tab.
Image: An optional image that is only visible when the tab is expanded.
Body: The text content that appears when the tab is opened.
Easing: Controls the smoothness of the open/close animation.
Duration: Sets how long the animation takes to complete, measured in milliseconds.
Tip: A Tab Accordion automatically modifies the browser's URL when a specific tab is opened. You can use this feature to link directly to a specific tab on the page, as it will automatically load in the opened state when the URL is accessed.
Organizing Tab Accordion Sections
Once you have added a Tab Accordion, you can change its position on the page.
Select the section: In the Layers panel, find the Tab Accordion section.
Drag and drop: Click and hold the section and drag it above or below other sections in the panel to place it where you need it in your project.