Get startedFoundationsPatternsComponentsTokensContentGet support
Select your development framework to see all code in your development languages. You can change this in the top right of the screen.Support for the Long Term Support (LTS) version of the Design system will be available until September 2025. View the upgrade guide
AllAccordionCalloutContainerDetailsHero bannerListPopoverTableTextBadgeFilter chipModalNotification bannerProgress indicatorSkeleton loaderTooltipButtonButton groupCheckboxDate pickerDropdownFile uploaderIcon buttonInputRadioText areaDrawer FooterForm stepperHeaderMicrosite headerPaginationSide menuTabsBlockDividerForm itemGridIconsLinkSpacer
AccordionGitHub issuesFigmaLet users show and hide sections of related content on a page.Related:Details, Tabs
Code playground
This is the content in an accordion item. This content can be anything that you want including rich text, components, and more.
Properties
Examples

Expand or collapse part of a form

Review your application

Date of referral
January 27, 2021
Work safety concerns
None
Type of referral
Word of mouth, internet search
Intake received from another site
Yes
Name
Joan Smith
Contact preference
Text message

Hide and show many sections of information (FAQ)

Show all sectionsTo create an account you will need to contact your office admin.You will need to verify your identity through our two factor authentication in addition to the digital signature.Yes, you can see the status of your application on the main service dashboard when you login. You will receive updates and notifications in your email as your request progresses.Yes, our digital service is designed with accessibility in mind. More information on accessibility.
Design
Detailed design documentation for this component can be found on its component page in Figma.
Accessibility
Accessibility documentation for this component can be found on its component page in Figma. More accessibility guidance for design and development is coming soon.
Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours
Get startedPatternsComponentsDesign tokensContentSubmit an issue#design-system-supportContribute to the design systemRoadmapRelease notes