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 contained information and can be hidden again by clicking on the title.
Tutorials
Name | Description |
---|---|
Learn to dynamically display content in Salesforce using Avonni Expandable Sections for improved UX. |
Changing the properties
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.
Choosing a variant
The variant attribute is defining the appearance of the expandable section header. However, the section header styling can be overridden by customizing styling settings from the Style panel.
Adding Content
Title and Content attributes can be filled manually or by selecting any available flow resources.
Adding Interactions
No interactions are available.
Styling the Expandable Section
From the Styles panel, you can customize styling attributes for the Expandable Section component:
Base
: to customize styling settings for the base variant.Shaded
: to customize styling settings for the Shaded variant.
Examples
Specifications
Attributes
Name | Type | Description |
---|---|---|
Title | String | The title can include text, and is displayed in the header. |
Closed | Boolean | If present, close the section. |
Collapsible | Boolean | If present, the section is collapsible. |
Content | String | Main rich text content for a section. |
Variant | String | Variant of the section. Valid values include |
Styling Hooks
For the Base and Shaded variant
Name | Description |
---|---|
Block Start | Defines the logical block start margin of the title element |
Block End | Defines the logical block end margin of the title element |
Background Color | To define a background color on the title section. |
Header Font Color | To define a header font color on the title section. |
Header Font Size | To define a header font size on the title section. |
Header Font weight | To define a header font weight on the title section. |
Icon Color | To define an icon color if an icon is present. |
Icon Color Focus | To define an icon color focus if an icon is present. |
Icon Color Hover | To define an icon color hover if an icon is present. |
Last updated