Accordion

The Accordion component organizes content into collapsible sections, allowing users to toggle between expanded and collapsed states.

Anatomy

An Accordion consists of the following parts:

AccordionItem: A container for each collapsable section.

AccordionTrigger: A button that expands and collapses its associated content.
AccordionContent: The collapsible area that holds the content for each accordion item.

Adding an Accordion

To add an Accordion to your page, follow these steps:

Insert the Accordion from the Library.

You can add or remove accordion items within the Accordion as needed. To add new items, you can either insert a new AccordionItem from the Library, or duplicate an existing item.

Select and modify the text within the AccordionTrigger and AccordionContent to match your content.

Pro tip

Quickly duplicate an AccordionItem by selecting it and pressing Cmd + D (Mac) or Ctrl + D (Windows).

Guides

Expanded by Default

To set a specific AccordionItem to expand by default:

Select the Accordion component and navigate to the Properties Panel.

Set the defaultValue to a specific value (e.g., 0). If set to 0, the first item will expand; if set to 1, the second item will expand, and so on.

Expand Multiple Items

To allow more than one AccordionItem to be expanded simultaneously, follow these steps:

Select the Accordion component and go to the Properties Panel.

Set the type to multiple.

Use the defaultValue property to define which items should be expanded by default (e.g., 0,1, so the first two items are expanded).

Disabled Item

To disable a specific AccordionItem component, follow these steps:

Select the AccordionItem you want to disable.

In the Properties Panel, set the disabled property to true.

This will prevent users from interacting with the selected item.

Disabling the Entire Accordion

To disable all accordion items and prevent users from interacting with the accordion entirely:

Select the Accordion component.

In the Properties Panel, add the disabled property and set it to true.

Customizing the Accordion Trigger

You can fully customize the AccordionTrigger by adding, removing, or rearranging elements within it. This flexibility allows you to create custom layouts containing user information or media content directly within the trigger.

In the video below, we demonstrate how to customize an AccordionTrigger to showcase user messages using the Row, Column, Avatar, and Text components.

Changing the Trigger Icon

To replace the trigger icon, follow these steps:

Select the existing icon within the AccordionTrigger component.

Go to Insert Menu > Icons.

Hold Option (Mac) or Alt (Windows) and click on the desired icon to replace the currently selected one. This will swap the icon instead of inserting a new one.

Repositioning the Trigger Icon

To reposition the trigger icon, follow these steps:

Select the icon in the AccordionTrigger component.

Drag the icon above or below the trigger text to adjust its position.

Adjusting Icon Animations

By default, the trigger icon rotates by 180° when expanded. You can modify the rotation or apply other animation effects. For example, to change the rotation from 180° to -90°:

Select the icon within the AccordionTrigger and navigate to the Properties Panel.

In the Classes field, locate and select the rotate class.

Click the open state to view its applied styles.

Go to Effects > Transform.

Click the Rotate item and adjust the Z value to -90deg.

You can also apply other effects like scaling, fading, or adding a bounce effect in the Effects section.

Changing the Background

To change the background color of the AccordionContent:

Select the AccordionContent component.

Navigate to Properties Panel > Background.

Choose a solid color, gradient, or image as the background.

Optionally, adjust the text color in the Typography section to ensure readability against the new background.

Changing the Border

To customize the border of the Accordion:

Select the AccordionTrigger or AccordionContent component.

Go to Properties Panel > Borders.

Adjust the border width and color as needed.

Properties

Accordion

Property	Type	Default	Description
collapsible	`boolean`	`true`	Determines whether users can close an expanded item by clicking its trigger (only applies when `type="single"`).
type	`"single"`	`"multiple"`	Determines if only one or multiple sections can be expanded at the same time.
disabled	`boolean`	`false`	If `true`, prevents the user from interacting with the accordion and all its items.
defaultValue	`string`	-	Specifies which accordion items should be expanded when the component first renders. When `type="single"`, use a single value (e.g., `"0"` or `"item-0"`). When `type="multiple"`, use multiple values separated by commas or spaces (e.g., `"0,1,2"`, `"item-0 item-1 item-2"`). If no values are set on accordion items, they can be expanded based on their order, starting from `0`.

AccordionItem

Property	Type	Default	Description
value	`string`	-	A unique value for the item.
disabled	`boolean`	`false`	If `true`, prevents the user from interacting with the item.

AccordionTrigger

Property	Type	Default	Description
tag	`“h1” \| “h2” \| “h3” \| “h4” \| “h5” \| “h6”`	`“h3”`	Specifies the HTML tag used.