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