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.
You can use a link with the
href attribute, or a button with the
data-target attribute. In both cases, the
data-toggle="collapse" is required.
Using the card component, you can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use
.accordion as a wrapper.
<a> can show and hide multiple elements by referencing them with a JQuery selector in its
<a> can show and hide an element if they each reference it with their
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.