Skip to content

Commit 7841a8f

Browse files
julien-deramondlouismaximepiton
authored andcommitted
Doc: add expanded accordion explanation (twbs#39304)
Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com>
1 parent 8358c76 commit 7841a8f

File tree

1 file changed

+5
-1
lines changed

1 file changed

+5
-1
lines changed

site/content/docs/5.3/components/accordion.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ toc: true
1111

1212
## How it works
1313

14-
The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally to make it collapsible. To render an accordion that's expanded, add the `.open` class on the `.accordion`.
14+
The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally to make it collapsible.
1515

1616
{{< callout info >}}
1717
{{< partial "callouts/info-prefersreducedmotion.md" >}}
@@ -21,6 +21,10 @@ The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally
2121

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

24+
To render an accordion that's expanded by default:
25+
- add the `.show` class on the `.accordion-collapse` element.
26+
- drop the `.collapsed` class from the `.accordion-button` element and set its `aria-expanded` attribute to `true`.
27+
2428
{{< example >}}
2529
<div class="accordion" id="accordionExample">
2630
<div class="accordion-item">

0 commit comments

Comments
 (0)