EN

Accordion

An Accordion is a dynamic user interface component that helps effectively manage and organize content in an interactive, user-friendly manner. It enables content to be collapsed into separate sections that can be expanded upon user interaction. This design is especially beneficial in environments with limited screen space, enhancing readability and providing a clean, organized layout for information presentation.

Introduction

An accordion is a useful component to be used as part of the UAE Design Language System. Refer to the usage of an accordion for websites built with the design system.

Visual representation

The following is a visual representation of the accordion in use along with it's code usage.

Code structure

The following is the basic code structure of how an accordion has be created. This code structure can be used to create custom accordion elements. For example, you may want to change the icon used to indicate an open and closed state.

<div class="aegov-accordion [&_.accordion-active_svg]:rotate-180" id="accordion-collapse" data-accordion="collapse">
	<div class="accordion-item">
		<div class="accordion-title" id="aegov-accordion-head-1">
			<button type="button" data-accordion-target="#aegov-accordion-body-1" aria-expanded="true" aria-controls="aegov-accordion-body-1">
				<span>... title ...</span>
				<svg data-accordion-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
			</button>
		</div>
		<div class="accordion-content hidden" id="aegov-accordion-body-1" aria-labelledby="aegov-accordion-head-1">
			<div class="accordion-content-body">
				... body content ...
			</div>
		</div>
	</div>
	<div class="accordion-item">
		<div class="accordion-title" id="aegov-accordion-head-2">
			<button type="button" data-accordion-target="#aegov-accordion-body-2" aria-expanded="false" aria-controls="aegov-accordion-body-2">
				<span>... title ...</span>
				<svg data-accordion-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
			</button>
		</div>
		<div class="accordion-content hidden" id="aegov-accordion-body-2" aria-labelledby="aegov-accordion-head-2">
			<div class="accordion-content-body">
				... body content ...
			</div>
		</div>
	</div>
</div>
This component depends on Javascript

This component depends on the use of JavaScript. The structure of code defined will work out-of-box if the bundled JavaScript library of AEGov-Design-System is utilized.

Using this JavaScript library is not mandatory. You may choose your preferred library as well, however you are required to style the component as per the example provided.

Variations

Variations are different versions of this component that you may use within your website. The choice of what variation is useful should be based on the user experience study and layout design applied to the page of your website.

With a different icon

A nested accordion

Behaviour

The behavior of an accordion component is defined by user interactions, primarily click or focus events.

When a user clicks or focuses on an accordion header, the associated content section expands to reveal information, while other sections remain collapsed to preserve space and focus. This interactive toggling behavior allows users to control the visibility of content according to their needs, aiding in the organization of information.

Accessibility

Keyboard interactions are incorporated for accessibility, where 'Tab' navigates between headers, and 'Enter' or 'Space' triggers the expand/collapse action.

When using keyboard navigation, it's important to visually indicate which accordion header is currently focused. The UAE Design Language System 2.0 uses the focus attribute of HTML and applies the ring to indicate elements in focus.

Screen reader support for an accordion

Screen readers translate on-screen information into speech or braille. Proper HTML semantics and attributes (like 'aria-expanded', 'aria-controls') can inform screen reader users about the state and function of the accordion.

To ensure compatiblity with WCAG 2.0, it is absolutely necessary to make sure that ARIA attributes are added to the accordion.

Opened state

An open state of an accordion is where the body, or the content of the accordion, is visible for the seleted title. This is triggered by a user clicking or focusing on the title of the element.

open state example of an accordion

Closed state

A closed state of an accordion item is when the content or body is not visible, while only the title is visible. During a closed state, the icon representing the state is usually a strong contrast or opposite of the open state.

closed state example of an accordion

State of an accordion can also be detected using the option method available in the bundled JavaScript library.

RTL support

This component is supported and configured to work for RTL layouts. Refer to the layout guideline to understand how to enabled RTL for websites.

The following is an example of this component with text in Arabic.

الاتصالات ونظم المعلومات تغطي جميع خدمات وأدوات الاتصالات وتقنية المعلومات والإنترنت والفضاء الإلكتروني والراديو والتلفزيون والطيف الترددي والحاسب الآلي وغيرها. ففي الربع الأخير من القرن الماضي بدأت الاتصالات ونظم المعلومات تأخذ حيزاً أوسع في الحياة اليومية والاتجاهات الوطنية للمجتمعات البشرية. أما الآن، فتمثل الاتصالات ونظم المعلومات العصب الرئيسي لديناميكية المجتمعات البشرية.

يتمثل دور الهيئة في إنشاء البيئة المثلى للوصول بقطاع الاتصالات وتكنولوجيا المعلومات في دولة الإمارات العربية المتحدة إلى مصاف المراكز الرئيسية على مستوى العالم. كما تعمل الهيئة على دعم قطاع الاتصالات وتكنولوجيا المعلومات في الدولة والمحافظة على المنافسة وعلى الدخول العادل للمرخص لهم في البنية التحتية وعلى الاستخدام الأمثل للموارد الطبيعية، وذلك من خلال تطبيق أفضل الممارسات العالمية في تنظيمه والإشراف عليه.

إن المنافسة هي المحرك الرئيسي للتطوير حيث تؤدي إلى خدمات عالية الجودة بأسعار متدنية وتؤدي إلى تبني أحدث الوسائل التكنولوجية. إن المنافسة عبارة عن سباق يضخ الابتكار والتقدم في شرايين القطاع.

All components that are part of the UAE Design System support RTL and have been designed to work for languages that require RTL layout.

The typography guidelines will also provide further information on use of the font stack for the Arabic language.

Usage

We recommend that accordions be used sparingly for primary content on a page. While they can be appropriate for organising small, specific sections of content, accordions are not a suitable replacement for well formatted plain text.

Where to use an accordion?

Here are common use cases where an accordion would be appropriate.

  • The primary Frequently Asked Questions (FAQ) section of your website.
  • Snippets of FAQ sections on certain pages.
  • Details and specifications of a service.
  • Forms with multiple sections that can be arranged in collapsable sections.
  • Profile section, when the details of a user are extensive.
  • To organise the links on the footer on a mobile device.
  • To organise the main navigation on a mobile device.

Spacing

Spacing is an essential feature of the design system. Learn more about spacing in our guidelines. The following rules are applicable towards an accordion.

  • Always maintin a vertical padding of 1.5 rem between the title text.
  • Ensure the body content of the accordion item has a vertical padding of 1.5 rem
  • Horizontal padding is optional, however recommended to for both the title and body content. It is recommended to have a 0.75 rem padding on the left and right.
Previous
Components
Next
Alert
Sign up for our newsletter
Receive the latest updates from the UAE Design System
TDRA empowers youth for a sustainable future
What's new
Sustainable by design

Sustainable web design is the practice of designing and developing websites that have a low environmental impact.

Read More