An accordion menu is a vertically stacked list of headers that can be clicked to hide or show the content within.
- Accordions are not a one-size-fits-all solution and should be used carefully. Scrolling is an acceptable behaviour when content is relevant and organized properly. In most cases, it’s better to display all content by default.
- The above applies when considering nested accordions, which should be avoided in favour of displaying content, features, and functionality on screen.
- Consider using accordions when you have a lot of information that might not be useful for all users.
- Accordions should not be used when the information is of high importance as users could have trouble finding what they need. Content within accordions might not be visible, or given as much weight as visible content, to search engines. A site’s most important content should be visible by default. Google is able to crawl HTML content hidden inside navigational elements such as tabs or expanding sections, however this content is less accessible to users.
- Accordion section labels should describe the content within and be aligned with user goals.
How it works
height from its current value to
0. Given how CSS handles animations, you cannot use
padding on a
.collapse element. Instead, use the class as an independent wrapping element.
The animation effect of this component is dependent on the
prefers-reduced-motion media query. See Bootstrap’s reduced motion section of our accessibility documentation.
Using the Bootstrap card component, you can extend the default collapse behaviour to create an accordion. To properly achieve the accordion style, be sure to use
.accordion as a wrapper.
Etiam vitae imperdiet nisi, in auctor ipsum. Nulla tempor felis at lectus tempus, a dignissim mauris pretium. In aliquet imperdiet dui, eget suscipit metus aliquam sed. Nam est ipsum, pharetra ac turpis nec, molestie fermentum metus. Suspendisse commodo egestas ligula eu venenatis.
Fusce eu risus quam. Vestibulum varius varius cursus. Suspendisse ut ante suscipit, ornare urna eu, vestibulum sapien. Sed pulvinar facilisis odio quis semper. Integer tempor finibus dignissim. Proin neque quam, commodo ac hendrerit at, fringilla sodales ligula. In id elit at lectus efficitur luctus nec at leo. Nulla orci urna, egestas sit amet urna sit amet, tempus posuere dui.
Donec eu arcu a risus fringilla fringilla eu eu neque. Ut pretium commodo gravida. Etiam vehicula erat at massa fermentum, eu tristique leo condimentum. Quisque quis ligula lobortis, maximus tellus eget, volutpat turpis. Nullam nunc diam, porta vitae consectetur in, efficitur in metus.
Add the custom dropdown icon toggle, and the ‘Expand all’ and ‘Collapse all’ links:
Each web property should stick to a single accordion style for consistency. If your project already uses the bordered accordion then do not use the borderless style.
For the border-less version add the class
borderless to your
Curabitur non est at dolor mattis rutrum eget condimentum ipsum. Nulla gravida, sapien non fermentum aliquet, purus tortor feugiat tellus, at auctor eros turpis in massa.
Fusce sagittis hendrerit metus, ac aliquam arcu gravida eu. Mauris lacinia dignissim dui sed dictum. Nullam a dignissim velit, nec finibus elit. Curabitur a diam nec tellus accumsan efficitur. Donec mauris augue, rutrum sit amet dictum at, tincidunt eget ex.
Be sure to add
aria-expanded to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of
aria-expanded="false". If you’ve set the collapsible element to be open by default using the
show class, set
<div>), the attribute
role="button" should be added to the element.
If your control element is targeting a single collapsible element – i.e. the
data-target attribute is pointing to an
id selector – you should add the
aria-controls attribute to the control element, containing the
id of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.
The following code can be used for numbered or non-numbered FAQs on winnpeg.ca:
<script src="/shared/js/faq-numbered-ds.js"></script>for numbered FAQs
<script src="/shared/js/faq-ds.js"></script>for non-numbered FAQs
The collapse plugin utilizes a few classes to handle the heavy lifting:
.collapsehides the content
.collapse.showshows the content
.collapsingis added when the transition starts, and removed when it finishes
These classes can be found in
Via data attributes
data-toggle="collapse" and a
data-target to the element to automatically assign control of one or more collapsible elements. The
data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class
collapse to the collapsible element. If you’d like it to default open, add the additional class
Enable manually with:
data-, as in
|parent||selector | jQuery object | DOM element||false||If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behaviour - this is dependent on the
|toggle||boolean||true||Toggles the collapsible element on invocation|
Asynchronous methods and transitions
All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.
Activates your content as a collapsible element. Accepts an optional options
Toggles a collapsible element to shown or hidden. Returns to the caller before the collapsible element has actually been shown or hidden (i.e. before the
hidden.bs.collapse event occurs).
Shows a collapsible element. Returns to the caller before the collapsible element has actually been shown (i.e. before the
shown.bs.collapse event occurs).
Hides a collapsible element. Returns to the caller before the collapsible element has actually been hidden (i.e. before the
hidden.bs.collapse event occurs).
Destroys an element’s collapse.
Bootstrap’s collapse class exposes a few events for hooking into collapse functionality.
|show.bs.collapse||This event fires immediately when the
|shown.bs.collapse||This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).|
|hide.bs.collapse||This event is fired immediately when the
|hidden.bs.collapse||This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).|