Accordion
Accordion is a widget with a list of items, each of which can be expanded or collapsed. Like Tabs, it is used to group content. Unlike Tabs, Accordion allows you to expand multiple items at a time.
You can operate the widget and control its content on the Settings tab, in the right panel.
Open by default item
You can choose whether any item of the Accordion will be opened by default on page load (Open by default). Initially, this option is disabled and all items will appear collapsed on page load. When enabled, you can choose from the Accordion Items list which item will be opened.
Openning multiple items at a time
You can choose multiple elements to be expanded at a time. By default, only one element appears open (Allow opening one at a time).
If this option is disabled, the user can expand several Accordion Items, while the rest will not be automatically collapsed.
If the Open by default option is also selected, then you can choose the items from the list that will be opened on page load. You can make one, multiple, or all items open.
Transition event
In the settings, you can choose an action that will open the Accordion Items (Transition event). The default action is Click. You can also choose Hover.
You can manage the Accordion Items:
- click “+” to add an item
- click “-” to delete an item
- hold the three stripes icon to the left of the item title to move the item
By default, all Accordion Items have the same structure and styles.
Each Accordion Item consists of:
- Accordion Title
- Accordion Content
You can add any items and widgets to an Item Title and Item Content. For example, you can add an image to an Item Title. In this case, the image will be added to all other items Titles.
You can use the Apply independent structure setting with the Accordion. It allows you to make the structure of Accordion Items independent of each other. That is, each item can have different elements and widgets with different styles. Once this setting is enabled, it cannot be cancelled.
You can set up animation effects when opening/closing Accordion Items.
Animation settings offer the following options:
- Effect defines an effect on tab opening
- None
- Fade (by default)
- Slide Horizonta
- Slide Vertical
- when opening and closing an item (Open/Close)
- Animation smoothness is defined with Bezier curves, showing the speed of animation at different stages. You can select the desired type from the dropdown list. The default type is Linear.
- (in milliseconds). You can select animation duration from 0 to 2000ms from the dropdown list. The default value is 200ms
To edit content of an Accordion Item, open the Settings tab in the right panel. Click on the title of an item with content you want to edit.
When clicking on the item title, you will switch to the corresponding item on the Canvas.
![Accordion Item [1] is selected and highlighted on the Canvas](https://lh6.googleusercontent.com/d5HMZ4V5gZru8NGhFd8bdGhrBBgTFoYN9qEuyuvJcM0y1KAVeXu-CSjqW_YuJEcMuu7jXcOBH-PwmMXKWr9iFBULbN2qJsyKPYOxpccgC-Fx_rMoX1nt45Y9vEse1ZC_9SsfIngLZvP7jKQ_XqHF3rGKeOhRpHsfcB7VTOqLFcaTFJFy-tUsQOahp31uTA "Accordion Item [1] is selected and highlighted on the Canvas")
Now you can edit its content.
You can style the Accordion widget using the Styles tab in the right panel. You can style both the entire widget and its individual items. For example, you can set borders for the entire widget, as well as paddings for the Title and Content, change the font size and the Title background color.
Styling the Open Item of the Accordion widget
Open state is used to customize styles of an open item.
Style the item for this state. For example, you can change the Item Title background color.
