Links

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

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 base and shaded.

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 modified 1mo ago