Expandable Section
An expandable section gives a hierarchy to a page.
Overview
The Expandable Section component, also known as an Accordion, allows the user to hide or show content within a section of the interface. It typically consists of a title or header and a content area that is initially hidden and can be revealed by clicking on the title. When the content is revealed, it expands to display the information contained, which can be hidden again by clicking on the title.
Tutorials
Name | Description |
---|---|
Learn to configure the expandable section to add other components into a section. |
Configuring the Expendable Section
Making the Expandable section Closed
and/or Collapsible
Closed
and/or Collapsible
By making it Collapsible
, a chevron button icon will be added to expand the section content.
The Closed attribute makes the expandable section closed by default. The user must click on the section's title to open and view the content.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252Fk8S7lMPnerTPHraWilVR%252F2024-07-27_07-51-45.png%3Falt%3Dmedia%26token%3Da96350f9-d720-44e6-a9e7-0fb6f7c6e21d&width=768&dpr=4&quality=100&sign=3083f7ac&sv=1)
Choosing a variant
The variant attribute defines the appearance of the expandable section header. However, the section header styling can be overridden by customizing styling settings from the Style panel.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FG4TC0TNblDdWoYzdpZP9%252F2024-07-27_07-42-56.png%3Falt%3Dmedia%26token%3De2d2c82b-a287-43e0-9a14-40fdf6e5331a&width=768&dpr=4&quality=100&sign=24332f6e&sv=1)
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FY3XfyMJwhJFxf8suJ514%252F2024-07-27_07-42-19.png%3Falt%3Dmedia%26token%3Ddbe049e9-5fa4-49a9-9e08-7398a7ead5e2&width=768&dpr=4&quality=100&sign=cfcbe537&sv=1)
Adding Content
Title and Content attributes can be filled manually or by selecting any available flow resources.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FmDTPXFKw78tDlzRcy5UC%252F2024-07-27_07-41-24.png%3Falt%3Dmedia%26token%3D4a80c741-ce48-4e72-a639-64c1f6c1605c&width=768&dpr=4&quality=100&sign=defb0815&sv=1)
Adding Progress and Tags
The Expandable Section component offers additional features to enrich your content visually:
Progress Indicators:
Visually display progress using either a circle or bar format.
Enter the progress value manually or map it to a flow variable for dynamic updates.
Customize the appearance with various UI settings.
Tags:
Add descriptive tags to categorize or highlight information.
Choose from different visual styles (variants) for the tags.
Add tags manually or populate them from a flow variable.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FD0qwkD3408IiGFdfIFqG%252F2024-07-27_07-58-50.png%3Falt%3Dmedia%26token%3D0010ba7c-bb60-49b7-9018-2d5cc4072fc7&width=768&dpr=4&quality=100&sign=922888e&sv=1)
Adding Interactions
You can make your Expandable Section interactive by adding actions that trigger when users click on them. Here's how:
Add an Action Button: Create a button within your Expandable Section.
Configure the Action: In the "Action Click" interaction, define what should happen when clicking the button. You can navigate to a specific record page, open a modal, or trigger other actions.
This allows you to build more engaging and dynamic user interfaces within your flows.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252F5yXqVwemywm3qq4Enr1M%252F2024-07-27_07-50-38.png%3Falt%3Dmedia%26token%3D1921da4e-850a-4497-84ab-0cdfb7420747&width=768&dpr=4&quality=100&sign=4124324f&sv=1)
Styling the Expandable Section
The Styles panel offers two options to personalize the appearance of your Expandable Section:
Base: Adjust the default look of the section, including background, borders, and text.
Shaded: Apply a subtle background shading to the section for a visual distinction
Last updated