Skip to main content

Accordion

The Accordion component is a highly effective layout tool used to organize content into collapsible sections, allowing users to expand and collapse panels to view or hide information as needed. This component is particularly useful for applications that require a clean and organized presentation of content, such as FAQs, product details, or step-by-step guides. By using an Accordion, businesses can enhance the user experience by providing a structured and intuitive interface that allows users to easily navigate and interact with content. The Accordion is ideal for vertical tabbed interactions, offering a compact and efficient way to manage large amounts of information without overwhelming the user.

Properties​

To effectively utilize an Accordion, the following data and attributes are necessary:

  • Accordion-Level Attributes:
    • Accordion Code: A unique identifier for the accordion, used for referencing and integration within larger systems or applications. This code is essential for enabling interactions and actions related to the accordion.
  • Panel Attributes:
    • Code: A unique identifier for each panel, used to identify and refer to specific panels in actions. This allows for precise control and interaction with individual panels.
    • Name: The label displayed on each panel, providing context and clarity to the user about the content contained within the panel.
    • Icon: An optional icon displayed alongside the panel name, enhancing visual appeal and aiding in quick identification of panel content.
    • Move Icon: A feature that allows users to drag and drop panels to change their sequence within the accordion, providing flexibility in organizing content.
    • Cross Icon: A feature that allows users to remove a panel from the accordion. This is a destructive action, so users should be aware that removing a panel will delete its content.
    • +Add Accordion Panel: A button that enables users to add new panels to the accordion, allowing for dynamic expansion of content as needed.

By structuring the Accordion component with these attributes, businesses can create a flexible and user-friendly interface that effectively organizes and presents content. The ability to control panel order, add or remove panels, and customize panel appearance ensures that the Accordion remains a powerful tool for designing responsive and engaging applications.

Style​

Best Practices​

  • Consistency: Ensure that the Accordion's style is consistent with the overall design of your application. This includes using similar colors, fonts, and spacing.
  • Accessibility: Use sufficient color contrast for text and background colors to ensure readability for all users, including those with visual impairments.
  • Responsiveness: Design the Accordion to be responsive, ensuring it looks good on all screen sizes. Use relative units like em or rem for font sizes and percentages for widths.
  • User Feedback: Provide visual feedback for user interactions, such as changing the background color or border when an accordion item is hovered over or active.

Highest Value Features​

  • Background and Border Customization: Allows for a visually appealing design that can match the brand's color scheme.
  • Font Options: Customizable font settings enhance readability and align with the brand's typography.
  • Shadow Effects: Adds depth to the design, making the Accordion stand out on the page.

All the Settings​

Overflow Group​

  • "Normal" and "On Hover" Options:
    • Overflow X: Controls horizontal overflow. Options: visible, hidden, scroll, auto, initial, inherit.
    • Overflow Y: Controls vertical overflow. Options: visible, hidden, scroll, auto, initial, inherit.

Border Group​

  • "Normal" and "On Hover" Options:
    • Border Icons: Choose which borders to style (All, Top, Left, Bottom, Right).
    • Color:
      • Color Options: Color picker or enter values in HEX, RGBA, HSLA format.
    • Width: Set border width using up and down arrows or enter a numeric value in pixels.
    • Radius: Set corner radius in degrees for rounded corners.

Padding Group​

  • "Normal" and "On Hover" Options:
    • Padding Icons: Choose which padding to adjust (All, Top, Left, Bottom, Right).
    • Size: Adjust padding size using up and down arrows or enter a numeric value in pixels.

Background Group​

  • "Normal" and "On Hover" Options:
    • Background Color: Use a color picker or enter values in HEX, RGBA, HSLA.
        • Design System: By default this follows the "Secondary background" color on the active design system.
    • Image: Select an image from the media library or use a URL.
    • Background Attachment: Options: scroll, fixed, local, initial, inherit.
      • Scroll: The background moves with the content.
      • Fixed: The background stays in place when scrolling.
      • Local: The background scrolls with the element's content.
    • Background Position X/Y: Adjust position in pixels for horizontal/vertical shift.
    • Background Repeat: Options: repeat, repeat-x, repeat-y, no-repeat, initial, inherit.
    • Background Size: Options: auto, length, cover, contain, initial, inherit.
    • Background Origin: Options: border-box, padding-box, content-box, initial, inherit.

Shadow Group​

  • "Normal" and "On Hover" Options:
    • Color:
      • Color Options: Color picker or enter values in HEX, RGBA, HSLA format.
    • Offset X/Y: Set shadow offset in pixels.
    • Blur Radius: Set blur radius in pixels.
    • Spread Radius: Set spread radius in pixels.

Label Font Group​

Design System: By default this follows the "Body medium" on the active design system.

  • Font Options:
    • "Normal" and "On Hover" Options:
      • Alignment: left, center, right, aligned.
      • Font Type: Choose from available fonts.
      • Font Size: Number expressed in px, em, or rem.
        • em: A relative unit that is based on the font size of the element. For example, if the font size of the element is 16px, then 1em is equal to 16px. It scales relative to the parent element's font size.
        • rem: A relative unit that is based on the font size of the root element (usually the <html> element). This means 1rem is equal to the font size set on the root element, providing a consistent scaling factor across the entire document.
      • Letter Spacing: In pixels.
      • Line Height: In pixels.
      • Style: normal, italic, oblique, initial, inherit.
      • Weight: thin, extra light, light, normal, medium, semi bold, bold, extra bold, black.
      • Color: Picker or values in HEX, RGBA, HSLA.
      • Stretch: Normal, semi condensed, condensed, extra condensed, ultra condensed, semi expanded, expanded, extra expanded, ultra expanded.
      • Variant: normal, small caps, initial, inherit.
      • Caps Variant: normal, small caps, all small caps, mini caps, all mini caps, unicase, titling caps, initial, inherit.

Panel Style Group​

  • Panel Color:
    • Color Options: Color picker or enter values in HEX, RGBA, HSLA format.
  • Active Panel Color: Highlight color for active panels.
  • Panel Icon Margin:
    • Margin Options: Adjust margin using icons for all, top, left, bottom, right.
  • Panel Icon Padding:
    • Padding Options: Adjust padding using icons for all, top, left, bottom, right.
  • Panel Title Margin:
    • Margin Options: Adjust margin using icons for all, top, left, bottom, right.
  • Panel Title Padding:
    • Padding Options: Adjust padding using icons for all, top, left, bottom, right.
  • Panel Title Font:
    • Design System: By default this follows the "Title Medium" on the active design system.
    • Font Options: Customize font settings for panel titles.
  • Active Panel Title Font:
    • Design System: By default this follows the "Title Medium" on the active design system.
    • Font Options: Customize font settings for active panel titles.

Explanation of Terms​

  • Initial: This value sets the property to its default value as defined in the CSS specification. It is useful when you want to reset a property to its original state.
  • Inherit: This value makes the element inherit the property from its parent element. It is useful for maintaining consistency across elements by using the same styling as the parent.

Actions​

Event: On Open Accordion Panel​

  • This action is executed whenever an accordion panel is opened by the user.
  • It triggers interactions or processes based on the panel's expansion, allowing for dynamic content display and updates within the application.

Compatible Functions​

  • Add accordion panel
  • Add vertical list to accordion panel