# Bootstrap 5 Accordion

> Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.

## How it works

The accordion uses [collapse](https://coreui.io/bootstrap/docs/components/collapse/) internally to make it collapsible.

> This component's animation effect relies on the `prefers-reduced-motion` media query. For more information, refer to the [reduced motion section of our accessibility documentation](https://coreui.io/bootstrap/docs/getting-started/accessibility/#reduced-motion).

Click the accordions below to expand/collapse the accordion content.

To render an accordion that's expanded by default:
- add the `.show` class on the `.accordion-collapse` element.
- drop the `.collapsed` class from the `.accordion-button` element and set its `aria-expanded` attribute to `true`.

### Flush

Add `.accordion-flush` to remove the default `background-color`, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.

### Always open

Omit the `data-coreui-parent` attribute on each `.accordion-collapse` to make accordion items stay open when another item is opened.

## Accessibility

Please read the [collapse accessibility section](https://coreui.io/bootstrap/docs/components/collapse/#accessibility) for more information.

## Customizing

### CSS variables

Accordions use local CSS variables on .accordion for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

```scss
--cui-accordion-color: #{$accordion-color};
--cui-accordion-bg: #{$accordion-bg};
--cui-accordion-transition: #{$accordion-transition};
--cui-accordion-border-color: #{$accordion-border-color};
--cui-accordion-border-width: #{$accordion-border-width};
--cui-accordion-border-radius: #{$accordion-border-radius};
--cui-accordion-inner-border-radius: #{$accordion-inner-border-radius};
--cui-accordion-btn-padding-x: #{$accordion-button-padding-x};
--cui-accordion-btn-padding-y: #{$accordion-button-padding-y};
--cui-accordion-btn-color: #{$accordion-button-color};
--cui-accordion-btn-bg: #{$accordion-button-bg};
--cui-accordion-btn-icon: #{escape-svg($accordion-button-icon)};
--cui-accordion-btn-icon-width: #{$accordion-icon-width};
--cui-accordion-btn-icon-transform: #{$accordion-icon-transform};
--cui-accordion-btn-icon-transition: #{$accordion-icon-transition};
--cui-accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
--cui-accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
--cui-accordion-body-padding-x: #{$accordion-body-padding-x};
--cui-accordion-body-padding-y: #{$accordion-body-padding-y};
--cui-accordion-active-color: #{$accordion-button-active-color};
--cui-accordion-active-bg: #{$accordion-button-active-bg};
```

### SASS variables

```scss
$accordion-padding-y:                     1rem !default;
$accordion-padding-x:                     1.25rem !default;
$accordion-color:                         var(--cui-body-color) !default;
$accordion-bg:                            var(--cui-body-bg) !default;
$accordion-border-width:                  var(--cui-border-width) !default;
$accordion-border-color:                  var(--cui-border-color) !default;
$accordion-border-radius:                 var(--cui-border-radius) !default;
$accordion-inner-border-radius:           subtract($accordion-border-radius, $accordion-border-width) !default;

$accordion-body-padding-y:                $accordion-padding-y !default;
$accordion-body-padding-x:                $accordion-padding-x !default;

$accordion-button-padding-y:              $accordion-padding-y !default;
$accordion-button-padding-x:              $accordion-padding-x !default;
$accordion-button-color:                  var(--cui-body-color) !default;
$accordion-button-bg:                     var(--cui-accordion-bg) !default;
$accordion-transition:                    $btn-transition, border-radius .15s ease !default;
$accordion-button-active-bg:              var(--cui-primary-bg-subtle) !default;
$accordion-button-active-color:           var(--cui-primary-text-emphasis) !default;

// fusv-disable
$accordion-button-focus-border-color:     $input-focus-border-color !default; // Deprecated in v5.0.0
// fusv-enable
$accordion-button-focus-box-shadow:       $btn-focus-box-shadow !default;

$accordion-icon-width:                    1.25rem !default;
$accordion-icon-color:                    $body-color !default;
$accordion-icon-active-color:             $primary-text-emphasis !default;
$accordion-icon-transition:               transform .2s ease-in-out !default;
$accordion-icon-transform:                rotate(-180deg) !default;

$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
```