The Accordion component displays related content in collapsible sections, allowing users to show or hide information for a streamlined experience quickly. Each accordion can contain multiple se
Last updated
Was this helpful?
First, you'll create the individual sections, or "items," for your accordion. Each item acts as a collapsible container where you'll place the content you want to display. This makes the Accordion component so powerful: you're not limited to just text and images. You can drag and drop any other Avonni Dynamic Component directly into an accordion section.
Do you want to include a detailed table of data? Drag a Data Table component right into the section. Need to visualize locations? Add a Map component. The possibilities are endless!
To add a new section, click the "Add Item" button.
Give your items the right look and feel.
Variant: Choose between "Base" for a standard appearance or "Shaded" for a subtle background effect.
Collapsible Icons: Enable or disable the icons that indicate whether a section is expanded or collapsed.
Icon Position: Place the collapsible icons on the left or right side of the item header.
This step lets you control which accordion section (or sections) are expanded when the component first loads.
One Section Open at a Time: If your accordion is set to allow only one open section at a time, and you select multiple sections here, only the first section in your list will be open initially.
Multiple Sections Open: To have multiple sections open by default, enable the "Allow Expansion of Multiple Sections" option
Margin:
Top: Adds space above the accordion.
Right: Adds space to the right of the accordion.
Bottom: Adds space below the accordion.
Left: Adds space to the left of the accordion.
Padding:
Top: Adds space inside the accordion, above the content.
Right: Adds space inside the accordion, to the right of the content.
Bottom: Adds space inside the accordion, below the content.
Left: Adds space inside the accordion, to the left of the content
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.
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 are divided into collapsible sections for better organization.
By leveraging the Accordion component, you can create user-friendly interfaces that present information concisely and engagingly.