Accordion
Accordions are used to organize content into collapsible sections, allowing users to expand and collapse sections as needed.
Overview
Usage
When to use this component?
Accordions are used to manage large amounts of content by dividing it into sections that can be expanded or collapsed. They are suitable for FAQs, content-heavy pages, or any interface where space is limited, and users need to access different sections of content without overwhelming them with too much information at once.
How it works
An accordion component typically includes a series of sections, each with a header that, when clicked, expands or collapses the section's content. Optional elements like icons can indicate the expanded or collapsed state. The accordion can be configured to display one section at a time or allow multiple sections to be expanded simultaneously.
Code
<dda-accordion
design="bg-border"
accordion_icon_class="material-icons material-symbols-outlined"
accordion_icon_text="home"
accordion_header_end_icon="info"
accordion_id="accordionOne"
header_text="Accordion Header"
sub_title="Sub Title"
body_description="This is the accordion body content."
link_button_text="Button"
custom_class=""
component_mode=""
default_open="true"
></dda-accordion>Properties
design
Determines the visual style of the accordion.
'bg-border'(default): Displays the accordion with a background and border.'no-border': Displays the accordion without a background or border.
"bg-border" | "no-border"
accordion_icon_class
CSS classes used for the accordion icon (e.g., Material Icons classes).
string
accordion_icon_text
The icon name or text to be displayed inside the icon element.
string
accordion_id
Unique identifier for the accordion, useful for targeting or toggling.
string
header_text
The text displayed in the accordion header. Defaults to 'Accordion Header'.
string
sub_title
Optional subtitle displayed under the header.
string
body_description
The text content inside the accordion body. Defaults to 'This is the accordion body content.'.
string
link_button_text
Text for a button shown in the accordion (usually within the body).
string
custom_class
Allows the user to pass additional CSS classes to customize the accordion's appearance. Defaults to an empty string.
string
component_mode
Provides an optional mode for additional customization (e.g., dark mode or variant styles).
string
component_mode
Defines a special mode (dark, light).
string
default_open
If set to "true", the accordion is expanded/open by default.
boolean
accordion_header_end_icon
Icon name to be displayed at the end of the accordion header (e.g., "info").
string
Anatomy
Anatomy Options
Lead-Icon: An icon positioned at the start of the accordion title, providing visual context or indicating the type of content.
Dropdown Icon: An icon that indicates the expandable and collapsible nature of the accordion, usually changing direction when clicked.
Title: The main text that describes the section of the accordion and prompts users to expand for more details.
Sub-title: Situated just below the title, the sub-title offers additional context or a secondary layer of detail about the accordion's contents, enhancing the user's understanding of what to expect upon expansion.
Description Text: Additional descriptive text positioned next to the expand icon, offering further clarification or supplementary information about the accordion’s contents.
Link Button: Positioned within the paragraph, these buttons serve as CTAs (Call to Action), guiding users to take specific actions or visit linked pages.
Dos and Don'ts
Use accordions to manage and organize large amounts of content.
Don't use accordions for single pieces of content that do not require collapsing.
Label each accordion section clearly to indicate its content.
Avoid using ambiguous or unclear labels for accordion sections.
Ensure accordion headers are large enough to be easily tappable or clickable.
Don't make accordion headers too small to interact with comfortably.
Provide visual feedback to indicate the expanded or collapsed state.
Don't leave users guessing whether a section is expanded or collapsed.
Use consistent styling and spacing across all accordion sections in the application.
Don't use inconsistent styles that may confuse users.
Update the state of the accordion in real-time as sections are expanded or collapsed.
Don't use accordions if you cannot provide real-time updates.
Last updated