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 (
Shortcut: M)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
Background:
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
Text:
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
Icons:
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.
Parameter | Description |
Title | The text in the tab portion of each tab item. Always visible. |
Text | The body text inside the tab. |
Read more link | Link at the bottom of the tab (optional) |
Link Type | Dropdown menu where you can choose the link type (Page, Element, External, Email, Phone, File). |
Easing | The acceleration of the transition animation |
Duration | the length of time it takes for the animation to be completed (milliseconds). |
Show Icon | Toggle to show the icon on the tab's right side. |
Rotate Icon | Toggle to make the icon rotate when clicking on a tab. |