Close

Quicklinks

Alert
Spacer
Table
CTA
CTA 5050
CTA Encore
CTA Full Width
Image Text CTA
Gallery
Accordion
Carousel Text
Homepage + 404 Hero
Instagram
Left-hand Sub Nav (FAQ)
Marketing Tiles Container
Member Benefits Promo
Redeem Points Promo
Filter Page
Image
Video
Anchor/Sticky Navigation
Breadcrumbs
How to Play Sub Navigation

Accordion

This component lets users show and hide sections of related content on a page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed maximus est. Vivamus vel dapibus tortor. Ut vel odio fermentum, tristique justo eget, mattis enim. Nulla rhoncus lorem et elementum molestie. Curabitur tincidunt hendrerit purus, non convallis tellus gravida a. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed maximus est. Vivamus vel dapibus tortor. Ut vel odio fermentum, tristique justo eget, mattis enim. Nulla rhoncus lorem et elementum molestie. Curabitur tincidunt hendrerit purus, non convallis tellus gravida a. 

Restuarant

Gym

Spa

Usage Criteria

This component is used as a way to get an overview of multiple, related sections of content containing information not everyone may need to access. 

Do's and Don'ts

  • Do not use this component for content that would have less than three expandable segments.
  • Do not use this component if all information would be needed by most users (essential information should not be hidden).

Design Notes

If there are less than three segments of information, it might be more beneficial to use the Anchor/Sticky Nav component, which displays the options horizontally instead and shows all the content.

For the expandable content area, avoid adding large or complex components; basic text and CTAs are preferred. Consult a power user for exceptions.

Configurable Options

This component has text fields labeled Accordion Title where the title of each segment can be configured, and an option to have the accordion default to display as expanded or collapsed. 

As for the content, authors can manually add components as they normally would within a column into the expanded space.

Developer Notes

Type Name
AEM Component Name Accordion
Code Base Name  
resourceSupertype  
SCSS Attributes  
JavaScript  
Status  
Version  

Our operations span the entirety of the province that we now call British Columbia. We respectfully acknowledge that we are guests in the territories of more than 200 First Nations, each with unique traditions, cultures, and histories. We are grateful to these First Nations caretakers for their stewardship of these lands and waters since time immemorial. 

BCLC is committed to establishing and maintaining good relations with all First Nations, Métis, and Inuit people in British Columbia and beyond. Our journey has only recently begun, and we have a lot of work to do in collaboration with Indigenous Peoples to understand the Truth, reconcile the past, and truly generate win-wins for the greater good, together.

Read more

If you gamble, use your