Accordion Groups
Accordion groups are designed to organize content into collapsible sections, enabling users to expand and collapse each section as needed for a streamlined and manageable browsing experience.
Overview
Usage
When to use this component?
Accordion Groups are ideal for efficiently managing space while organizing large amounts of content into digestible sections. They are perfect for interfaces such as FAQs and forms, where users benefit from accessing detailed sections one at a time without the clutter of too much visible information simultaneously.
How it works
Each accordion group consists of multiple collapsible sections, each with a title that users can click to expand or collapse. This component may include an 'Expand All' button, allowing users to open all sections at once for quick access. Icons next to each title indicate the current state—expanded or collapsed—and provide a visual cue for operation, enhancing user interaction and accessibility.
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
Function for handling the group accordion collapse
<script>
async function toggleGroup(groupId) {
const all = Array.from(document.querySelectorAll('dda-accordion'));
const targetGroup = all.filter(acc => acc.getAttribute('accordion_id') === groupId);
if (targetGroup.length === 0) return;
const openStates = await Promise.all(targetGroup.map(el => el.getIsOpen()));
const allOpen = openStates.every(state => state === true);
for (const el of targetGroup) {
if (allOpen) {
await el.closeAccordion();
} else {
await el.openAccordion();
}
}
const button = document.getElementById('toggleAccordionButton');
button.textContent = allOpen ? 'Open Group One' : 'Collapse Group One';
}
</script>
<button id="toggleAccordionButton" onclick="toggleGroup('accordiongroupOne')">Toggle Group One</button>
<dda-accordion
design="bg-border"
header_text="What is this website ?"
custom_class="mb-2"
component_mode=""
accordion_icon="info"
accordion_id="accordiongroupOne"
default_open="true"
>
<p>This is a sample website made to showcase the use of the Dubai
Design System Web Components Library</p>
</dda-accordion>
<dda-accordion
design="bg-border"
header_text="What is the Dubai Design System Component Library?"
body_description="This is the accordion body content."
custom_class="mb-2"
component_mode=""
accordion_icon="manage_search"
accordion_id="accordiongroupOne"
default_open="true"
>
<p>
The Dubai Design System Component Library is a set of pre-built,
reusable UI components that help developers create consistent and
scalable applications across Dubai government portals.
</p>
</dda-accordion>
<dda-accordion
design="bg-border"
header_text="What is this website ?"
custom_class="mb-2"
component_mode=""
accordion_icon="info"
accordion_id="accordiongroupTwo"
default_open="true"
>
<p>
This is a sample website made to showcase the use of the Dubai
Design System Web Components Library
</p>
</dda-accordion>
<dda-accordion
design="bg-border"
header_text="What is the Dubai Design System Component Library?"
body_description="This is the accordion body content."
custom_class="mb-2"
component_mode=""
accordion_icon="manage_search"
accordion_id="accordiongroupTwo"
default_open="true"
>
<p>
The Dubai Design System Component Library is a set of pre-built,
reusable UI components that help developers create consistent and
scalable applications across Dubai government portals.
</p>
</dda-accordion>Anatomy
Anatomy Options
Group Title: Sits at the top of the accordion group, giving a general overview or category title that encompasses all underlying accordion sections.
Group Lead-Icon: An icon associated with the group title, enhancing the visual representation of the overall content category.
Group Sub-title: A supplementary title under the main group title, providing additional context or detail about the group’s content.
Expand/Collapse Button: A button that allows users to expand or collapse all accordion sections within the group simultaneously, improving usability for navigating large information sets.
Individual Accordion Titles: Each accordion within the group has its own title, guiding the user to the specific content contained within each section.
Lead-Icon for Each Accordion: Icons corresponding to each individual accordion title, visually representing the type of content within.
Sub-title for Each Accordion: A sub-title for additional details beneath each accordion title, offering more specific information about the content before opening the accordion.
Description Text: Additional text that can appear beside the collapse icon, offering brief information about the accordion’s content or state.
Link Button: Actionable buttons within the accordion content, providing links or actions related to the accordion’s content.
Collapse Icon: Icons next to each accordion title that indicate whether the accordion is open or closed, typically shown as an up or down arrow.
Dos and Don'ts
Do use clear and concise titles for both the group and individual accordions.
Don't clutter titles with unnecessary information that could overwhelm the user.
Do include icons that are intuitive and help visually distinguish between different sections.
Don't use overly complex or similar icons for different sections, which can cause confusion.
Do provide a Group Sub-title if additional context helps clarify the grouped content.
Don't make sub-titles too lengthy; keep them brief and to the point.
Do implement an Expand/Collapse All button to enhance user convenience.
Don't hide the Expand/Collapse functionality where users might expect to control visibility.
Do provide additional description text where necessary to inform the user.
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