From dac60074dc6cdc6c67a9e97fe46f4f43366df839 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Mon, 23 Oct 2023 19:25:53 +0200 Subject: [PATCH] Doc: add expanded accordion explanation (#39304) Co-authored-by: Louis-Maxime Piton --- site/content/docs/5.3/components/accordion.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/site/content/docs/5.3/components/accordion.md b/site/content/docs/5.3/components/accordion.md index 227d11a8690a..8b22686ad50f 100644 --- a/site/content/docs/5.3/components/accordion.md +++ b/site/content/docs/5.3/components/accordion.md @@ -11,7 +11,7 @@ toc: true ## How it works -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`. +The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally to make it collapsible. {{< callout info >}} {{< partial "callouts/info-prefersreducedmotion.md" >}} @@ -21,6 +21,10 @@ The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally 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`. + {{< example >}}