Content Controls
Content
These controls assist in managing the accordion’s content and behavior, allowing users to define its structure and initial state.
- Content – Add new Accordion Content elements within the accordion.
- Accordion – If enabled, only one Accordion Content can be expanded at a time. Others are collapsed automatically when a new one is expanded.
- First Item Opened – Decide if the first section of the accordion should be opened by default when the page loads.
Design Controls
Container
Modify the accordion’s overall container appearance to ensure it seamlessly integrates with your webpage’s design.
- Background – Choose a color to set as the accordion’s container background.
- Width – Define the width of the accordion container.
- Padding – Adjust the internal space within the accordion container:
- Padding – Fine-tune the specific padding values for all sides of the container.
Item
Control the style of the accordion items, ensuring they are visually appealing and intuitive for users.
- Style – Pick a style for the accordion items, like default, bordered, or pill-shaped.
- Icon – Customize the icons representing open and closed states:
- Position – Determine where the icon appears relative to the accordion item’s text.
- Icon – Select an icon that indicates a collapsed accordion item.
- Active Icon – Choose an icon for an expanded accordion item.
- Size – Adjust the size of the icons.
- Color – Define the color of the icons.
- Active Color – Set the color of the icon when the accordion item is active or expanded.
- Bordered – Design the borders of the accordion items (Note: This control is available only when the style is set to “bordered”):
- Border Color – Select a color for the item borders.
- Border Width – Specify the thickness of the borders.
- Border Radius – Define the roundness of the border corners.
- Bottom Only – Toggle to apply the border only to the bottom edge of the accordion item.
- Background – Choose a background color for individual accordion items.
- Padding – Manage the internal spacing within each accordion item:
- Padding – Define specific padding values for all sides of an item.
- Borders – Style the borders of pill-shaped accordion items (Note: This control is available only when the style is set to “pills”):
- Radius – Adjust the curvature of the pill-shaped borders.
- Styling – Fine-tune the border appearance and design.
- Shadow – Add a shadow effect to the accordion items for depth.
- Typography – Customize the font properties of the accordion item’s text.
- Active – Style the accordion items when they’re expanded:
- Text Color – Set the text color for active items.
- Background – Choose a background color for active accordion items.
Spacing
Refine the gaps between the accordion elements to ensure a clean layout and seamless user experience.
- Between Items – Adjust the space between individual accordion items.
- Below Item – Define the spacing beneath each accordion item.
- Container – Customize the external spacing of the accordion container:
- Margin Top – Set the space above the accordion container.
- Margin Bottom – Determine the space below the accordion container.
