Doc: add expanded accordion explanation (#39304)

Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com>

diff --git a/site/content/docs/5.3/components/accordion.md b/site/content/docs/5.3/components/accordion.md
index 227d11a8690a5ac7d34fc2101f9d5a6c02e7c534..8b22686ad50f90bd69a877561c73c306ebb4e512 100644 (file)
--- 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 >}}
 <div class="accordion" id="accordionExample">
   <div class="accordion-item">