Accordion
The Avonni Accordion component organizes related content into collapsible sections that users can expand or collapse to reveal additional information. Use it to keep long content tidy, group related details, and present a structured, easy-to-navigate layout.
Overview
The Accordion is a container: each section acts as a collapsible region where you place the content you want to display. You're not limited to text and images — you can drag and drop any other Avonni Dynamic Component directly into an accordion section. Need a detailed table of data? Drag a Data Table into the section. Want to visualize locations? Add a Map. The possibilities are endless.
Why Use the Accordion Component?
Organize Content: Group related information into manageable sections, improving readability and navigation.
Save Space: Keep long content hidden until needed, reducing clutter on the page.
Improve User Experience: Provide a clear and intuitive way for users to access information.
Enhance Visual Appeal: Create a structured and organized layout for your content.
Configuration
To configure the Accordion, select it on the canvas. The Edit Accordion panel opens on the right with two tabs: Properties and Style. The sections below mirror the Properties tab.
Properties
Allow Expansion of Multiple Sections
By default, only one section can be open at a time — opening a section collapses the others. Enable Allow Expansion of Multiple Sections to let users keep several sections expanded simultaneously.
Active Section(s)
Choose which section (or sections) are expanded when the component first loads. Select from the sections you've added under Items.
One Section Open at a Time: If the accordion only allows a single open section and you select multiple here, only the first one in the list opens initially.
Multiple Sections Open: To have several sections open by default, enable Allow Expansion of Multiple Sections above, then select them here.
Items
The Items collection defines the sections of your accordion. Click Add Item to create a new section, then drag and drop any Avonni Dynamic Components into it to build its content.
Each item exposes the following settings:
Label
The text shown in the section's header.
Value
A unique identifier for the section. It's used by Active Section(s) to control which sections open by default.
Variant
Choose Base for a standard appearance or Shaded for a subtle background effect. Default is Base.
Hide Icon
Hide the expand/collapse icon shown in the section header. When hidden, the icon settings below no longer apply.
Collapsed Icon
The icon displayed when the section is collapsed. Default is utility:chevronright.
Expanded Icon
The icon displayed when the section is expanded. Default is utility:chevrondown.
Position
Place the icon on the Left (default) or Right of the section header.
Size
The icon size: XX-Small (default), X-Small, Small, Medium, or Large.
Collapsed Icon, Expanded Icon, Position, and Size are only available when Hide Icon is turned off.
Set Component Visibility
All components support conditional visibility — see Component Visibility.
Use Cases
FAQs: Present frequently asked questions with their answers in a compact format.
Product Details: Organize product information into sections like "Description," "Specifications," and "Reviews."
Step-by-Step Guides: Break down complex processes into manageable steps.
Forms: Group related form fields into collapsible sections for better organization.
Styling
The Accordion offers extensive styling options to help you integrate it seamlessly into your Salesforce environment. Configure them from the Style tab of the Edit Accordion panel.
Controls the outer spacing around the entire accordion.
Top / Right / Bottom / Left: Adjust the space on each side of the accordion.
Controls the inner spacing between the accordion's content and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Customizes the border surrounding the accordion.
Color: Set the color of the accordion's border.
Size: Set the thickness of the accordion's border.
Style: Set the border style (solid, dashed, dotted, etc.).
Radius: Round the corners of the accordion's border.
Controls the accordion's dimensions.
Width / Height: Set fixed dimensions for the accordion.
Overflow: Determine how content that extends beyond the set dimensions is handled (scroll, hidden, etc.).
Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.
Sets the accordion's background.
Color: Set the background color of the accordion.
Styles each accordion section and its parts.
Section: Margin / Padding, Background Color, and Border (color, size, style, radius).
Section Header: Margin / Padding, Background Color, and Border (color, size, style, radius).
Section Content: Margin / Padding, Background Color, and Border (color, size, style, radius).
Section Title: Color, Font Size, Font Style, Font Weight.
Section Icon: Background Color, Foreground Color, Foreground Color Hover.
Section Icon Border: Color, Size, Style, Radius.
Last updated
Was this helpful?