From a58884f054e6629206dd2d9035dc2498302fd1d7 Mon Sep 17 00:00:00 2001
From: Tiberiu Dumitru <tiberiu.dumitru23@gmail.com>
Date: Wed, 4 Dec 2024 21:23:22 +0200
Subject: [PATCH] OEL-3547: Added collapse/expand buttons in accordion. [skip
 chromatic]

---
 .../__snapshots__/accordion.test.js.snap      | 949 ++++++++++--------
 .../bcl-accordion/accordion.html.twig         | 130 ++-
 src/data/accordion/data.js                    |   7 +
 .../js/accordion-toggle/accordion-toggle.js   |  54 +
 src/themes/default/src/js/index.esm.js        |   2 +
 src/themes/default/src/js/index.umd.js        |   2 +
 src/themes/joinup/src/js/index.esm.js         |   2 +
 src/themes/joinup/src/js/index.umd.js         |   2 +
 src/themes/ucpkn/src/js/index.esm.js          |   2 +
 src/themes/ucpkn/src/js/index.umd.js          |   2 +
 10 files changed, 664 insertions(+), 488 deletions(-)
 create mode 100644 src/themes/default/src/js/accordion-toggle/accordion-toggle.js

diff --git a/src/components/bcl-accordion/__snapshots__/accordion.test.js.snap b/src/components/bcl-accordion/__snapshots__/accordion.test.js.snap
index 1598fbbaa..28ca2b0de 100644
--- a/src/components/bcl-accordion/__snapshots__/accordion.test.js.snap
+++ b/src/components/bcl-accordion/__snapshots__/accordion.test.js.snap
@@ -7,143 +7,164 @@ exports[`OE - Accordion flush variant renders correctly 1`] = `
     id="accordion-1"
   >
     <div
-      class="accordion-item"
+      class="d-flex justify-content-end gap-3 mb-3"
     >
-      <h2
-        class="accordion-header"
-        id="heading-1-1"
+      <button
+        class="btn btn-primary btn-md"
+        data-action="expand"
+        data-target="accordion-1"
+        type="button"
       >
-        <button
-          aria-controls="collapse-1-1"
-          aria-expanded="false"
-          autocomplete="off"
-          class="accordion-button"
-          data-bs-target="#collapse-1-1"
-          data-bs-toggle="collapse"
-          type="button"
-        >
-          Accordion Item #1
-        </button>
-      </h2>
-      <div
-        aria-labelledby="heading-1-1"
-        class="accordion-collapse collapse show"
-        data-bs-parent="#accordion-1"
-        id="collapse-1-1"
-        role="region"
+        Expand section
+      </button>
+      <button
+        class="btn btn-secondary btn-md"
+        data-action="collapse"
+        data-target="accordion-1"
+        type="button"
       >
-        <div
-          class="accordion-body"
-        >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-            Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
-          <br />
-           Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-          <br />
-            Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
-          <br />
-           Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-            Duis fermentum facilisis ex, ac porta massa.
-        </div>
-      </div>
+        Collapse section
+      </button>
     </div>
     <div
-      class="accordion-item"
+      class="accordion-items-wrapper"
     >
-      <h2
-        class="accordion-header"
-        id="heading-1-2"
-      >
-        <button
-          aria-controls="collapse-1-2"
-          aria-expanded="false"
-          autocomplete="off"
-          class="accordion-button collapsed"
-          data-bs-target="#collapse-1-2"
-          data-bs-toggle="collapse"
-          type="button"
-        >
-          Accordion Item #2
-        </button>
-      </h2>
       <div
-        aria-labelledby="heading-1-2"
-        class="accordion-collapse collapse"
-        data-bs-parent="#accordion-1"
-        id="collapse-1-2"
-        role="region"
+        class="accordion-item"
       >
+        <h2
+          class="accordion-header"
+          id="heading-1-1"
+        >
+          <button
+            aria-controls="collapse-1-1"
+            aria-expanded="false"
+            autocomplete="off"
+            class="accordion-button"
+            data-bs-target="#collapse-1-1"
+            data-bs-toggle="collapse"
+            type="button"
+          >
+            Accordion Item #1
+          </button>
+        </h2>
         <div
-          class="accordion-body"
+          aria-labelledby="heading-1-1"
+          class="accordion-collapse collapse show"
+          id="collapse-1-1"
+          role="region"
         >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-            Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
-          <br />
-           Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-          <br />
-            Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
-          <br />
+          <div
+            class="accordion-body"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+              Duis fermentum facilisis ex, ac porta massa.
+          </div>
         </div>
       </div>
-    </div>
-    <div
-      class="accordion-item"
-    >
-      <h2
-        class="accordion-header"
-        id="heading-1-3"
+      <div
+        class="accordion-item"
       >
-        <button
-          aria-controls="collapse-1-3"
-          aria-expanded="false"
-          autocomplete="off"
-          class="accordion-button collapsed"
-          data-bs-target="#collapse-1-3"
-          data-bs-toggle="collapse"
-          type="button"
+        <h2
+          class="accordion-header"
+          id="heading-1-2"
         >
-          Accordion Item #3
-        </button>
-      </h2>
+          <button
+            aria-controls="collapse-1-2"
+            aria-expanded="false"
+            autocomplete="off"
+            class="accordion-button collapsed"
+            data-bs-target="#collapse-1-2"
+            data-bs-toggle="collapse"
+            type="button"
+          >
+            Accordion Item #2
+          </button>
+        </h2>
+        <div
+          aria-labelledby="heading-1-2"
+          class="accordion-collapse collapse"
+          id="collapse-1-2"
+          role="region"
+        >
+          <div
+            class="accordion-body"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+          </div>
+        </div>
+      </div>
       <div
-        aria-labelledby="heading-1-3"
-        class="accordion-collapse collapse"
-        data-bs-parent="#accordion-1"
-        id="collapse-1-3"
-        role="region"
+        class="accordion-item"
       >
+        <h2
+          class="accordion-header"
+          id="heading-1-3"
+        >
+          <button
+            aria-controls="collapse-1-3"
+            aria-expanded="false"
+            autocomplete="off"
+            class="accordion-button collapsed"
+            data-bs-target="#collapse-1-3"
+            data-bs-toggle="collapse"
+            type="button"
+          >
+            Accordion Item #3
+          </button>
+        </h2>
         <div
-          class="accordion-body"
+          aria-labelledby="heading-1-3"
+          class="accordion-collapse collapse"
+          id="collapse-1-3"
+          role="region"
         >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-            Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
-          <br />
-           Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-          <br />
-            Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
-          <br />
-           Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-            Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
-          <br />
-          <br />
-           Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-            Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
-          <br />
-           Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-          <br />
-            Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
-          <br />
-           Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa.
+          <div
+            class="accordion-body"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+            <br />
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa.
+          </div>
         </div>
       </div>
     </div>
@@ -158,143 +179,164 @@ exports[`OE - Accordion renders correctly 1`] = `
     id="accordion-1"
   >
     <div
-      class="accordion-item"
+      class="d-flex justify-content-end gap-3 mb-3"
     >
-      <h2
-        class="accordion-header"
-        id="heading-1-1"
+      <button
+        class="btn btn-primary btn-md"
+        data-action="expand"
+        data-target="accordion-1"
+        type="button"
       >
-        <button
-          aria-controls="collapse-1-1"
-          aria-expanded="false"
-          autocomplete="off"
-          class="accordion-button"
-          data-bs-target="#collapse-1-1"
-          data-bs-toggle="collapse"
-          type="button"
-        >
-          Accordion Item #1
-        </button>
-      </h2>
-      <div
-        aria-labelledby="heading-1-1"
-        class="accordion-collapse collapse show"
-        data-bs-parent="#accordion-1"
-        id="collapse-1-1"
-        role="region"
+        Expand section
+      </button>
+      <button
+        class="btn btn-secondary btn-md"
+        data-action="collapse"
+        data-target="accordion-1"
+        type="button"
       >
-        <div
-          class="accordion-body"
-        >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-            Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
-          <br />
-           Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-          <br />
-            Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
-          <br />
-           Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-            Duis fermentum facilisis ex, ac porta massa.
-        </div>
-      </div>
+        Collapse section
+      </button>
     </div>
     <div
-      class="accordion-item"
+      class="accordion-items-wrapper"
     >
-      <h2
-        class="accordion-header"
-        id="heading-1-2"
-      >
-        <button
-          aria-controls="collapse-1-2"
-          aria-expanded="false"
-          autocomplete="off"
-          class="accordion-button collapsed"
-          data-bs-target="#collapse-1-2"
-          data-bs-toggle="collapse"
-          type="button"
-        >
-          Accordion Item #2
-        </button>
-      </h2>
       <div
-        aria-labelledby="heading-1-2"
-        class="accordion-collapse collapse"
-        data-bs-parent="#accordion-1"
-        id="collapse-1-2"
-        role="region"
+        class="accordion-item"
       >
+        <h2
+          class="accordion-header"
+          id="heading-1-1"
+        >
+          <button
+            aria-controls="collapse-1-1"
+            aria-expanded="false"
+            autocomplete="off"
+            class="accordion-button"
+            data-bs-target="#collapse-1-1"
+            data-bs-toggle="collapse"
+            type="button"
+          >
+            Accordion Item #1
+          </button>
+        </h2>
         <div
-          class="accordion-body"
+          aria-labelledby="heading-1-1"
+          class="accordion-collapse collapse show"
+          id="collapse-1-1"
+          role="region"
         >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-            Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
-          <br />
-           Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-          <br />
-            Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
-          <br />
+          <div
+            class="accordion-body"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+              Duis fermentum facilisis ex, ac porta massa.
+          </div>
         </div>
       </div>
-    </div>
-    <div
-      class="accordion-item"
-    >
-      <h2
-        class="accordion-header"
-        id="heading-1-3"
+      <div
+        class="accordion-item"
       >
-        <button
-          aria-controls="collapse-1-3"
-          aria-expanded="false"
-          autocomplete="off"
-          class="accordion-button collapsed"
-          data-bs-target="#collapse-1-3"
-          data-bs-toggle="collapse"
-          type="button"
+        <h2
+          class="accordion-header"
+          id="heading-1-2"
         >
-          Accordion Item #3
-        </button>
-      </h2>
+          <button
+            aria-controls="collapse-1-2"
+            aria-expanded="false"
+            autocomplete="off"
+            class="accordion-button collapsed"
+            data-bs-target="#collapse-1-2"
+            data-bs-toggle="collapse"
+            type="button"
+          >
+            Accordion Item #2
+          </button>
+        </h2>
+        <div
+          aria-labelledby="heading-1-2"
+          class="accordion-collapse collapse"
+          id="collapse-1-2"
+          role="region"
+        >
+          <div
+            class="accordion-body"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+          </div>
+        </div>
+      </div>
       <div
-        aria-labelledby="heading-1-3"
-        class="accordion-collapse collapse"
-        data-bs-parent="#accordion-1"
-        id="collapse-1-3"
-        role="region"
+        class="accordion-item"
       >
+        <h2
+          class="accordion-header"
+          id="heading-1-3"
+        >
+          <button
+            aria-controls="collapse-1-3"
+            aria-expanded="false"
+            autocomplete="off"
+            class="accordion-button collapsed"
+            data-bs-target="#collapse-1-3"
+            data-bs-toggle="collapse"
+            type="button"
+          >
+            Accordion Item #3
+          </button>
+        </h2>
         <div
-          class="accordion-body"
+          aria-labelledby="heading-1-3"
+          class="accordion-collapse collapse"
+          id="collapse-1-3"
+          role="region"
         >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-            Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
-          <br />
-           Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-          <br />
-            Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
-          <br />
-           Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-            Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
-          <br />
-          <br />
-           Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-            Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
-          <br />
-           Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-          <br />
-            Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
-          <br />
-           Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa.
+          <div
+            class="accordion-body"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+            <br />
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa.
+          </div>
         </div>
       </div>
     </div>
@@ -309,107 +351,111 @@ exports[`OE - Accordion with custom title tags renders correctly 1`] = `
     id="accordion-1"
   >
     <div
-      class="accordion-item"
+      class="accordion-items-wrapper"
     >
-      <h5
-        class="accordion-header"
-        id="heading-1-1"
-      >
-        <button
-          aria-controls="collapse-1-1"
-          aria-expanded="false"
-          autocomplete="off"
-          class="accordion-button"
-          data-bs-target="#collapse-1-1"
-          data-bs-toggle="collapse"
-          type="button"
-        >
-          Accordion Item #1
-        </button>
-      </h5>
       <div
-        aria-labelledby="heading-1-1"
-        class="accordion-collapse collapse show"
-        data-bs-parent="#accordion-1"
-        id="collapse-1-1"
-        role="region"
+        class="accordion-item"
       >
+        <h5
+          class="accordion-header"
+          id="heading-1-1"
+        >
+          <button
+            aria-controls="collapse-1-1"
+            aria-expanded="false"
+            autocomplete="off"
+            class="accordion-button"
+            data-bs-target="#collapse-1-1"
+            data-bs-toggle="collapse"
+            type="button"
+          >
+            Accordion Item #1
+          </button>
+        </h5>
         <div
-          class="accordion-body"
+          aria-labelledby="heading-1-1"
+          class="accordion-collapse collapse show"
+          data-bs-parent="#accordion-1"
+          id="collapse-1-1"
+          role="region"
         >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-            Duis fermentum facilisis ex, ac porta massa.
+          <div
+            class="accordion-body"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+              Duis fermentum facilisis ex, ac porta massa.
+          </div>
         </div>
       </div>
-    </div>
-    <div
-      class="accordion-item"
-    >
-      <h4
-        class="accordion-header"
-        id="heading-1-2"
-      >
-        <button
-          aria-controls="collapse-1-2"
-          aria-expanded="false"
-          autocomplete="off"
-          class="accordion-button collapsed"
-          data-bs-target="#collapse-1-2"
-          data-bs-toggle="collapse"
-          type="button"
-        >
-          Accordion Item #2
-        </button>
-      </h4>
       <div
-        aria-labelledby="heading-1-2"
-        class="accordion-collapse collapse"
-        data-bs-parent="#accordion-1"
-        id="collapse-1-2"
-        role="region"
+        class="accordion-item"
       >
+        <h4
+          class="accordion-header"
+          id="heading-1-2"
+        >
+          <button
+            aria-controls="collapse-1-2"
+            aria-expanded="false"
+            autocomplete="off"
+            class="accordion-button collapsed"
+            data-bs-target="#collapse-1-2"
+            data-bs-toggle="collapse"
+            type="button"
+          >
+            Accordion Item #2
+          </button>
+        </h4>
         <div
-          class="accordion-body"
+          aria-labelledby="heading-1-2"
+          class="accordion-collapse collapse"
+          data-bs-parent="#accordion-1"
+          id="collapse-1-2"
+          role="region"
         >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-            Duis fermentum facilisis ex, ac porta massa.
+          <div
+            class="accordion-body"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+              Duis fermentum facilisis ex, ac porta massa.
+          </div>
         </div>
       </div>
-    </div>
-    <div
-      class="accordion-item"
-    >
-      <h3
-        class="accordion-header"
-        id="heading-1-3"
-      >
-        <button
-          aria-controls="collapse-1-3"
-          aria-expanded="false"
-          autocomplete="off"
-          class="accordion-button collapsed"
-          data-bs-target="#collapse-1-3"
-          data-bs-toggle="collapse"
-          type="button"
-        >
-          Accordion Item #3
-        </button>
-      </h3>
       <div
-        aria-labelledby="heading-1-3"
-        class="accordion-collapse collapse"
-        data-bs-parent="#accordion-1"
-        id="collapse-1-3"
-        role="region"
+        class="accordion-item"
       >
+        <h3
+          class="accordion-header"
+          id="heading-1-3"
+        >
+          <button
+            aria-controls="collapse-1-3"
+            aria-expanded="false"
+            autocomplete="off"
+            class="accordion-button collapsed"
+            data-bs-target="#collapse-1-3"
+            data-bs-toggle="collapse"
+            type="button"
+          >
+            Accordion Item #3
+          </button>
+        </h3>
         <div
-          class="accordion-body"
+          aria-labelledby="heading-1-3"
+          class="accordion-collapse collapse"
+          data-bs-parent="#accordion-1"
+          id="collapse-1-3"
+          role="region"
         >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-            Duis fermentum facilisis ex, ac porta massa.
+          <div
+            class="accordion-body"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+              Duis fermentum facilisis ex, ac porta massa.
+          </div>
         </div>
       </div>
     </div>
@@ -434,143 +480,164 @@ exports[`OE - Accordion with main title renders correctly 1`] = `
       </a>
     </h4>
     <div
-      class="accordion-item"
+      class="d-flex justify-content-end gap-3 mb-3"
     >
-      <h2
-        class="accordion-header"
-        id="heading-1-1"
+      <button
+        class="btn btn-primary btn-md"
+        data-action="expand"
+        data-target="accordion-1"
+        type="button"
       >
-        <button
-          aria-controls="collapse-1-1"
-          aria-expanded="false"
-          autocomplete="off"
-          class="accordion-button"
-          data-bs-target="#collapse-1-1"
-          data-bs-toggle="collapse"
-          type="button"
-        >
-          Accordion Item #1
-        </button>
-      </h2>
-      <div
-        aria-labelledby="heading-1-1"
-        class="accordion-collapse collapse show"
-        data-bs-parent="#accordion-1"
-        id="collapse-1-1"
-        role="region"
+        Expand section
+      </button>
+      <button
+        class="btn btn-secondary btn-md"
+        data-action="collapse"
+        data-target="accordion-1"
+        type="button"
       >
-        <div
-          class="accordion-body"
-        >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-            Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
-          <br />
-           Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-          <br />
-            Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
-          <br />
-           Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-            Duis fermentum facilisis ex, ac porta massa.
-        </div>
-      </div>
+        Collapse section
+      </button>
     </div>
     <div
-      class="accordion-item"
+      class="accordion-items-wrapper"
     >
-      <h2
-        class="accordion-header"
-        id="heading-1-2"
-      >
-        <button
-          aria-controls="collapse-1-2"
-          aria-expanded="false"
-          autocomplete="off"
-          class="accordion-button collapsed"
-          data-bs-target="#collapse-1-2"
-          data-bs-toggle="collapse"
-          type="button"
-        >
-          Accordion Item #2
-        </button>
-      </h2>
       <div
-        aria-labelledby="heading-1-2"
-        class="accordion-collapse collapse"
-        data-bs-parent="#accordion-1"
-        id="collapse-1-2"
-        role="region"
+        class="accordion-item"
       >
+        <h2
+          class="accordion-header"
+          id="heading-1-1"
+        >
+          <button
+            aria-controls="collapse-1-1"
+            aria-expanded="false"
+            autocomplete="off"
+            class="accordion-button"
+            data-bs-target="#collapse-1-1"
+            data-bs-toggle="collapse"
+            type="button"
+          >
+            Accordion Item #1
+          </button>
+        </h2>
         <div
-          class="accordion-body"
+          aria-labelledby="heading-1-1"
+          class="accordion-collapse collapse show"
+          id="collapse-1-1"
+          role="region"
         >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-            Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
-          <br />
-           Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-          <br />
-            Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
-          <br />
+          <div
+            class="accordion-body"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+              Duis fermentum facilisis ex, ac porta massa.
+          </div>
         </div>
       </div>
-    </div>
-    <div
-      class="accordion-item"
-    >
-      <h2
-        class="accordion-header"
-        id="heading-1-3"
+      <div
+        class="accordion-item"
       >
-        <button
-          aria-controls="collapse-1-3"
-          aria-expanded="false"
-          autocomplete="off"
-          class="accordion-button collapsed"
-          data-bs-target="#collapse-1-3"
-          data-bs-toggle="collapse"
-          type="button"
+        <h2
+          class="accordion-header"
+          id="heading-1-2"
+        >
+          <button
+            aria-controls="collapse-1-2"
+            aria-expanded="false"
+            autocomplete="off"
+            class="accordion-button collapsed"
+            data-bs-target="#collapse-1-2"
+            data-bs-toggle="collapse"
+            type="button"
+          >
+            Accordion Item #2
+          </button>
+        </h2>
+        <div
+          aria-labelledby="heading-1-2"
+          class="accordion-collapse collapse"
+          id="collapse-1-2"
+          role="region"
         >
-          Accordion Item #3
-        </button>
-      </h2>
+          <div
+            class="accordion-body"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+          </div>
+        </div>
+      </div>
       <div
-        aria-labelledby="heading-1-3"
-        class="accordion-collapse collapse"
-        data-bs-parent="#accordion-1"
-        id="collapse-1-3"
-        role="region"
+        class="accordion-item"
       >
+        <h2
+          class="accordion-header"
+          id="heading-1-3"
+        >
+          <button
+            aria-controls="collapse-1-3"
+            aria-expanded="false"
+            autocomplete="off"
+            class="accordion-button collapsed"
+            data-bs-target="#collapse-1-3"
+            data-bs-toggle="collapse"
+            type="button"
+          >
+            Accordion Item #3
+          </button>
+        </h2>
         <div
-          class="accordion-body"
+          aria-labelledby="heading-1-3"
+          class="accordion-collapse collapse"
+          id="collapse-1-3"
+          role="region"
         >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-            Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
-          <br />
-           Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-          <br />
-            Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
-          <br />
-           Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-            Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
-          <br />
-          <br />
-           Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-            Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
-          <br />
-           Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-          <br />
-          <br />
-            Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
-          <br />
-           Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa.
+          <div
+            class="accordion-body"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+            <br />
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            <br />
+            <br />
+              Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa. 
+            <br />
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Duis fermentum facilisis ex, ac porta massa.
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/bcl-accordion/accordion.html.twig b/src/components/bcl-accordion/accordion.html.twig
index 2f0e5b857..6921800a0 100644
--- a/src/components/bcl-accordion/accordion.html.twig
+++ b/src/components/bcl-accordion/accordion.html.twig
@@ -16,6 +16,8 @@
         stay_open (boolean) (default: false)
       },
     ]
+  - expand_button: (button object) (default: {})
+  - collapse_button: (button object) (default: {})
   - open_item_id (int) (default: 0)
   - attributes (drupal attrs)
 #}
@@ -27,6 +29,8 @@
 {% set _id = id|default(random(1000)) %}
 {% set _flush = flush ?? false %}
 {% set _items = items|default([]) %}
+{% set _expand_button = expand_button|default({}) %}
+{% set _collapse_button = collapse_button|default({}) %}
 {% set _open_item_id = open_item_id|default(0) %}
 {% set _classes = ['accordion'] %}
 {% if _flush %}
@@ -43,57 +47,89 @@
 <div
   {{ attributes }}
 >
-{%- if _title is not empty -%}
-  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
-    title: _title,
-    title_tag: _title_tag,
-    title_link: _title_link,
-    attributes: _title_attributes,
-  } only %}
-{%- endif -%}
+  {%- if _title is not empty -%}
+    {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+      title: _title,
+      title_tag: _title_tag,
+      title_link: _title_link,
+      attributes: _title_attributes,
+    } only %}
+  {%- endif -%}
 
-{% for _item in _items %}
-  {% set _open_item = _open_item_id == loop.index %}
-  {% set _button_classes = ['accordion-button'] %}
-  {% if not _open_item %}
-    {% set _button_classes = _button_classes|merge(['collapsed']) %}
-  {% endif %}
-  <div class="accordion-item">
-    {%- set _item_title_tag = _item.title_tag|default('h2') %}
-    <{{ _item_title_tag }} 
-      class="accordion-header" 
-      id="heading-{{ _id }}-{{ loop.index }}"
-    >
-      {% set button_attributes = create_attribute()
-                                .addClass(_button_classes)
-                                .setAttribute('data-bs-toggle', 'collapse')
-                                .setAttribute('autocomplete', 'off')
-                                .setAttribute('data-bs-target', '#collapse-' ~ _id ~ '-' ~ loop.index)
-                                .setAttribute('aria-controls', 'collapse-' ~ _id ~ '-' ~ loop.index)
-                                .setAttribute('aria-expanded', open_item ? 'true' : 'false')
-      %}
-      {% include '@oe-bcl/bcl-button/button.html.twig' with {
-        label: _item.title,
-        clean_class: true,
-        attributes: button_attributes
-      } only %}
-    </{{ _item_title_tag }}>
-    <div
-      id="collapse-{{ _id }}-{{ loop.index }}"
-      class="accordion-collapse collapse{{ _open_item ? ' show' }}"
-      aria-labelledby="heading-{{ _id }}-{{ loop.index }}"
-      role="region"
-    {% if not _item.stay_open %}
-      data-bs-parent="#accordion-{{ _id }}"
+  {% if _items|length > 1 and (_expand_button is not empty or _collapse_button is not empty) %}
+  <div class="d-flex justify-content-end gap-3 mb-3">
+    {% if _expand_button is not empty %}
+      {% if _expand_button.attributes is empty %}
+        {% set _expand_button = _expand_button|merge({
+            attributes: create_attribute()
+          })
+        %}
+      {% endif %}
+      {% include '@oe-bcl/bcl-button/button.html.twig' with _expand_button|merge({
+        attributes: _expand_button.attributes
+                    .setAttribute('data-target', 'accordion-' ~ _id)
+                    .setAttribute('data-action', 'expand')
+      }) only %}
+    {% endif %}
+    {% if _collapse_button is not empty %}
+      {% if _collapse_button.attributes is empty %}
+        {% set _collapse_button = _collapse_button|merge({
+            attributes: create_attribute()
+          })
+        %}
+      {% endif %}
+      {% include '@oe-bcl/bcl-button/button.html.twig' with _collapse_button|merge({
+        attributes: _collapse_button.attributes
+                    .setAttribute('data-target', 'accordion-' ~ _id)
+                    .setAttribute('data-action', 'collapse')
+      }) only %}
     {% endif %}
-    >
-      <div class="accordion-body">
-        {%- set _content = _item.content|default('') %}
-        {%- block content _content -%}
+  </div>
+  {% endif %}
+  <div class="accordion-items-wrapper">
+    {% for _item in _items %}
+      {% set _open_item = _open_item_id == loop.index %}
+      {% set _button_classes = ['accordion-button'] %}
+      {% if not _open_item %}
+        {% set _button_classes = _button_classes|merge(['collapsed']) %}
+      {% endif %}
+      <div class="accordion-item">
+        {%- set _item_title_tag = _item.title_tag|default('h2') %}
+        <{{ _item_title_tag }} 
+          class="accordion-header" 
+          id="heading-{{ _id }}-{{ loop.index }}"
+        >
+          {% set button_attributes = create_attribute()
+                                    .addClass(_button_classes)
+                                    .setAttribute('data-bs-toggle', 'collapse')
+                                    .setAttribute('autocomplete', 'off')
+                                    .setAttribute('data-bs-target', '#collapse-' ~ _id ~ '-' ~ loop.index)
+                                    .setAttribute('aria-controls', 'collapse-' ~ _id ~ '-' ~ loop.index)
+                                    .setAttribute('aria-expanded', open_item ? 'true' : 'false')
+          %}
+          {% include '@oe-bcl/bcl-button/button.html.twig' with {
+            label: _item.title,
+            clean_class: true,
+            attributes: button_attributes
+          } only %}
+        </{{ _item_title_tag }}>
+        <div
+          id="collapse-{{ _id }}-{{ loop.index }}"
+          class="accordion-collapse collapse{{ _open_item ? ' show' }}"
+          aria-labelledby="heading-{{ _id }}-{{ loop.index }}"
+          role="region"
+        {% if not _item.stay_open and _expand_button is empty  %}
+          data-bs-parent="#accordion-{{ _id }}"
+        {% endif %}
+        >
+          <div class="accordion-body">
+            {%- set _content = _item.content|default('') %}
+            {%- block content _content -%}
+          </div>
+        </div>
       </div>
-    </div>
+    {% endfor %}
   </div>
-{% endfor %}
 </div>
 {% endif %}
 
diff --git a/src/data/accordion/data.js b/src/data/accordion/data.js
index ad546aaac..5482b2e44 100644
--- a/src/data/accordion/data.js
+++ b/src/data/accordion/data.js
@@ -17,4 +17,11 @@ module.exports = {
     },
   ],
   open_item_id: 1,
+  expand_button: {
+    label: "Expand section",
+  },
+  collapse_button: {
+    label: "Collapse section",
+    variant: "secondary",
+  },
 };
diff --git a/src/themes/default/src/js/accordion-toggle/accordion-toggle.js b/src/themes/default/src/js/accordion-toggle/accordion-toggle.js
new file mode 100644
index 000000000..cdf190bae
--- /dev/null
+++ b/src/themes/default/src/js/accordion-toggle/accordion-toggle.js
@@ -0,0 +1,54 @@
+/* eslint-disable prefer-destructuring */
+import Collapse from "@openeuropa/bcl-bootstrap/js/src/collapse";
+import EventHandler from "@openeuropa/bcl-bootstrap/js/src/dom/event-handler";
+import SelectorEngine from "@openeuropa/bcl-bootstrap/js/src/dom/selector-engine";
+
+class AccordionToggle {
+  static isInitialized = false;
+
+  constructor(buttonElement) {
+    this.buttonElement = buttonElement;
+    this.targetAccordionId = buttonElement.getAttribute("data-target");
+    this.action = buttonElement.getAttribute("data-action");
+
+    this.accordionElement = SelectorEngine.findOne(`#${this.targetAccordionId}`);
+    this.accordionItems = SelectorEngine.find(".accordion-collapse", this.accordionElement);
+
+    this.addEventListeners();
+  }
+
+  addEventListeners() {
+    EventHandler.on(this.buttonElement, "click", (event) => this.handleAccordionAction(event));
+  }
+
+  handleAccordionAction(event) {
+    const item = event.target;
+    const action = item.getAttribute('data-action');
+    const accordionItems = this.accordionItems;
+
+    accordionItems.forEach((accordionItem) => {
+      const collapseInstance = Collapse.getOrCreateInstance(accordionItem, { toggle: false });
+
+      if (action === 'expand') {
+        collapseInstance.show();
+      } else if (action === 'collapse') {
+        collapseInstance.hide();
+      }
+    });
+  }
+
+  static init() {
+    if (AccordionToggle.isInitialized) {
+      return;
+    }
+
+    const toggleButtons = SelectorEngine.find('[data-action][data-target]');
+    toggleButtons.forEach(buttonElement => new AccordionToggle(buttonElement));
+
+    AccordionToggle.isInitialized = true;
+  }
+}
+
+document.addEventListener("DOMContentLoaded", () => AccordionToggle.init());
+
+export default AccordionToggle;
diff --git a/src/themes/default/src/js/index.esm.js b/src/themes/default/src/js/index.esm.js
index bc5efca58..6c9b74370 100644
--- a/src/themes/default/src/js/index.esm.js
+++ b/src/themes/default/src/js/index.esm.js
@@ -13,6 +13,7 @@ import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
 import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
 import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
+import AccordionToggle from "@openeuropa/bcl-theme-default/src/js/accordion-toggle/accordion-toggle";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
 import ScrollSpyV2 from "@openeuropa/bcl-bootstrap/js/src/scrollspy";
@@ -30,6 +31,7 @@ export {
   Gallery,
   Modal,
   AccessibleToggle,
+  AccordionToggle,
   Offcanvas,
   Popover,
   ScrollSpyV2,
diff --git a/src/themes/default/src/js/index.umd.js b/src/themes/default/src/js/index.umd.js
index d9ddf8e82..50096558f 100644
--- a/src/themes/default/src/js/index.umd.js
+++ b/src/themes/default/src/js/index.umd.js
@@ -13,6 +13,7 @@ import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
 import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
 import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
+import AccordionToggle from "@openeuropa/bcl-theme-default/src/js/accordion-toggle/accordion-toggle";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
 import ScrollSpyV2 from "@openeuropa/bcl-bootstrap/js/src/scrollspy";
@@ -30,6 +31,7 @@ export default {
   Gallery,
   Modal,
   AccessibleToggle,
+  AccordionToggle,
   Offcanvas,
   Popover,
   ScrollSpyV2,
diff --git a/src/themes/joinup/src/js/index.esm.js b/src/themes/joinup/src/js/index.esm.js
index bc5efca58..6c9b74370 100644
--- a/src/themes/joinup/src/js/index.esm.js
+++ b/src/themes/joinup/src/js/index.esm.js
@@ -13,6 +13,7 @@ import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
 import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
 import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
+import AccordionToggle from "@openeuropa/bcl-theme-default/src/js/accordion-toggle/accordion-toggle";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
 import ScrollSpyV2 from "@openeuropa/bcl-bootstrap/js/src/scrollspy";
@@ -30,6 +31,7 @@ export {
   Gallery,
   Modal,
   AccessibleToggle,
+  AccordionToggle,
   Offcanvas,
   Popover,
   ScrollSpyV2,
diff --git a/src/themes/joinup/src/js/index.umd.js b/src/themes/joinup/src/js/index.umd.js
index d9ddf8e82..50096558f 100644
--- a/src/themes/joinup/src/js/index.umd.js
+++ b/src/themes/joinup/src/js/index.umd.js
@@ -13,6 +13,7 @@ import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
 import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
 import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
+import AccordionToggle from "@openeuropa/bcl-theme-default/src/js/accordion-toggle/accordion-toggle";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
 import ScrollSpyV2 from "@openeuropa/bcl-bootstrap/js/src/scrollspy";
@@ -30,6 +31,7 @@ export default {
   Gallery,
   Modal,
   AccessibleToggle,
+  AccordionToggle,
   Offcanvas,
   Popover,
   ScrollSpyV2,
diff --git a/src/themes/ucpkn/src/js/index.esm.js b/src/themes/ucpkn/src/js/index.esm.js
index bc5efca58..6c9b74370 100644
--- a/src/themes/ucpkn/src/js/index.esm.js
+++ b/src/themes/ucpkn/src/js/index.esm.js
@@ -13,6 +13,7 @@ import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
 import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
 import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
+import AccordionToggle from "@openeuropa/bcl-theme-default/src/js/accordion-toggle/accordion-toggle";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
 import ScrollSpyV2 from "@openeuropa/bcl-bootstrap/js/src/scrollspy";
@@ -30,6 +31,7 @@ export {
   Gallery,
   Modal,
   AccessibleToggle,
+  AccordionToggle,
   Offcanvas,
   Popover,
   ScrollSpyV2,
diff --git a/src/themes/ucpkn/src/js/index.umd.js b/src/themes/ucpkn/src/js/index.umd.js
index d9ddf8e82..50096558f 100644
--- a/src/themes/ucpkn/src/js/index.umd.js
+++ b/src/themes/ucpkn/src/js/index.umd.js
@@ -13,6 +13,7 @@ import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
 import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
 import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
+import AccordionToggle from "@openeuropa/bcl-theme-default/src/js/accordion-toggle/accordion-toggle";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
 import ScrollSpyV2 from "@openeuropa/bcl-bootstrap/js/src/scrollspy";
@@ -30,6 +31,7 @@ export default {
   Gallery,
   Modal,
   AccessibleToggle,
+  AccordionToggle,
   Offcanvas,
   Popover,
   ScrollSpyV2,