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