Add open/close all button and a little styling.

Author: yepzdk

web/themes/custom/hoeringsportal/assets/css/hoeringsportal.scss

@@ -1,17 +1,12 @@
-@import "custom-variables", "bootstrap-custom", "layout/aside",
-  "layout/page-map", "layout/page-project", "base", "module/nav", "module/hero",
-  "module/btn", "module/card", "module/footer", "module/content",
-  "module/drupal", "module/underline", "module/timeline", "module/dialogue",
-  "module/status-messages", "module/campaign", "module/splash", "module/lead",
-  "module/line-clamp", "module/page-teaser",
-  "module/responsive-image-as-background", "module/social-sharing-buttons",
-  "module/form", "module/image-gallery", "module/spinner", "module/signup",
-  "module/list", "module/pager", "module/paragraph-background-image",
-  "module/paragraph-content-promotion", "module/paragraph-files",
-  "module/paragraph-link", "module/info_box", "module/search",
-  "module/search-page", "module/newsletter", "module/proposal",
-  "module/animation", "module/header-v2", "module/animated-svg",
-  "../../node_modules/slick-carousel/slick/slick";
+@import "custom-variables", "bootstrap-custom", "layout/aside", "layout/page-map", "layout/page-project", "base",
+  "module/nav", "module/accordion", "module/hero", "module/btn", "module/card", "module/footer", "module/content",
+  "module/drupal", "module/underline", "module/timeline", "module/dialogue", "module/status-messages",
+  "module/campaign", "module/splash", "module/lead", "module/line-clamp", "module/page-teaser",
+  "module/responsive-image-as-background", "module/social-sharing-buttons", "module/form", "module/image-gallery",
+  "module/spinner", "module/signup", "module/list", "module/pager", "module/paragraph-background-image",
+  "module/paragraph-content-promotion", "module/paragraph-files", "module/paragraph-link", "module/info_box",
+  "module/search", "module/search-page", "module/newsletter", "module/proposal", "module/animation", "module/header-v2",
+  "module/animated-svg", "../../node_modules/slick-carousel/slick/slick";
 
 // We have an issue similar to https://www.drupal.org/project/bootstrap_barrio/issues/3228330#comment-14770789
 em.placeholder {

web/themes/custom/hoeringsportal/assets/css/module/_accordion.scss

@@ -0,0 +1,33 @@
+.accordion {
+  --bs-accordion-border-radius: 6px;
+  --accordion-border: 1px solid #333;
+  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27%23008486%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpath d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e");
+
+  .accordion-item {
+    overflow: hidden;
+    border-left: 0px;
+    border-right: 0px;
+    border-bottom: var(--accordion-border);
+  }
+
+  .accordion-header {
+    button {
+      font-size: 1.1rem;
+      font-weight: 700;
+
+      &:after {
+        color: $primary;
+      }
+    }
+  }
+
+  /* Add rounded corners to top and bottom elements*/
+  .accordion-item:first-child {
+    border-top: var(--accordion-border);
+  }
+
+  /* Avoid shadow hanging around after opening accordion */
+  button:focus:not(:focus-visible) {
+    box-shadow: none;
+  }
+}

web/themes/custom/hoeringsportal/assets/js/accordion.js

@@ -0,0 +1,38 @@
+document.addEventListener(
+  "click",
+  function (e) {
+    const button = e.target.closest(".open-all");
+
+    if (button) {
+      // Find the accordion container after the button
+      const accordion = button.nextElementSibling;
+
+      if (accordion) {
+        // Find all collapse elements within this accordion
+        const collapseElements = accordion.querySelectorAll(".collapse");
+
+        // Check if any are currently hidden
+        const anyCollapsed = Array.from(collapseElements).some(
+          (el) => !el.classList.contains("show"),
+        );
+
+        if (anyCollapsed) {
+          // Open all using jQuery
+          $(collapseElements).collapse("show");
+          button.textContent = button.textContent.replace(
+            "Open all",
+            "Close all",
+          );
+        } else {
+          // Close all using jQuery
+          $(collapseElements).collapse("hide");
+          button.textContent = button.textContent.replace(
+            "Close all",
+            "Open all",
+          );
+        }
+      }
+    }
+  },
+  false,
+);

web/themes/custom/hoeringsportal/assets/js/hoeringsportal.js

@@ -20,6 +20,7 @@ require("./icons.js");
 require("./modify-dialogue-form.js");
 require("./modify-dialogue-proposal-comments.js");
 require("./animated-svg.js");
+require("./accordion.js");
 
 // Enable popovers.
 $(function () {

web/themes/custom/hoeringsportal/templates/paragraph/paragraph--accordion.html.twig

@@ -41,6 +41,7 @@
 <div class="container my-2 my-lg-4">
   <div class="row">
     <div class="col-md-12">
+      <button class="btn btn-link d-block ms-auto open-all">{{ 'Open all'|t }}</button>
       <div class="accordion" id="accordion-{{ paragraph.id() }}">
         {% block paragraph %}
           {% if content.field_paragraph_title['#items'] is not empty %}