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 text accordion
From the top menu bar, click on the Add Menu (
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
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
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
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)
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).
Toggle to show the icon on the tab's right side.
Toggle to make the icon rotate when clicking on a tab.