From a9a963357c5bee2d32a98d21ef9ab13be404c5c7 Mon Sep 17 00:00:00 2001
From: Jacob Dreesen <j.dreesen@neusta.de>
Date: Fri, 4 Oct 2024 22:50:22 +0200
Subject: [PATCH] refactor: use the <details> tag for the accordion

---
 public/css/admin-style.css          | 13 ++++---------
 public/js/areabrick-overview.js     |  6 ------
 templates/bricks/overview.html.twig | 14 ++++++--------
 3 files changed, 10 insertions(+), 23 deletions(-)

diff --git a/public/css/admin-style.css b/public/css/admin-style.css
index 2edabb3..b3da6df 100644
--- a/public/css/admin-style.css
+++ b/public/css/admin-style.css
@@ -81,7 +81,7 @@
 }
 
 /* Accordion */
-#neusta_areabrick_config .accordion button {
+#neusta_areabrick_config details.accordion > summary {
     background-color: #efefef;
     color: #444;
     cursor: pointer;
@@ -94,19 +94,14 @@
     margin-bottom: 3px;
 }
 
-#neusta_areabrick_config .accordion button.active,
-#neusta_areabrick_config .accordion button:hover {
+#neusta_areabrick_config details[open].accordion > summary,
+#neusta_areabrick_config details.accordion > summary:hover {
     background-color: #ccc;
 }
 
-#neusta_areabrick_config .accordion ul {
+#neusta_areabrick_config details.accordion > ul {
     padding: 0 18px;
-    display: none;
     overflow-x: hidden;
     overflow-y: auto;
     max-height: 500px;
 }
-
-#neusta_areabrick_config .accordion ul.active {
-    display: block;
-}
diff --git a/public/js/areabrick-overview.js b/public/js/areabrick-overview.js
index 7647bf2..11c7b7f 100644
--- a/public/js/areabrick-overview.js
+++ b/public/js/areabrick-overview.js
@@ -44,12 +44,6 @@ neusta.areabrick_config.areabrick_overview = Class.create({
             this.handleClick('#neusta_areabrick_config a[data-page-id]', el => {
                 pimcore.helpers.openDocument(el.dataset.pageId, el.dataset.pageType);
             })
-
-            this.handleClick('#neusta_areabrick_config .accordion', (el, event) => {
-                if (event.target.tagName === 'BUTTON') {
-                    el.querySelectorAll('button, ul').forEach(el => el.classList.toggle('active'));
-                }
-            })
         }
 
         return this.panel;
diff --git a/templates/bricks/overview.html.twig b/templates/bricks/overview.html.twig
index eb7e7d3..406a723 100644
--- a/templates/bricks/overview.html.twig
+++ b/templates/bricks/overview.html.twig
@@ -26,9 +26,8 @@
                     {% set unpublished_pages = brick.pages|filter(page => not page.published) %}
 
                     {% if published_pages is not empty %}
-                        <!-- Published Pages Accordion -->
-                        <div class="accordion">
-                            <button>{{ 'neusta_pimcore_areabrick_config.areabricks.overview.table.published_pages'|trans }}</button>
+                        <details class="accordion">
+                            <summary>{{ 'neusta_pimcore_areabrick_config.areabricks.overview.table.published_pages'|trans }}</summary>
                             <ul>
                                 {% for page in published_pages %}
                                     <li>
@@ -39,13 +38,12 @@
                                     </li>
                                 {% endfor %}
                             </ul>
-                        </div>
+                        </details>
                     {% endif %}
 
                     {% if unpublished_pages is not empty %}
-                        <!-- Unpublished Pages Accordion -->
-                        <div class="accordion">
-                            <button>{{ 'neusta_pimcore_areabrick_config.areabricks.overview.table.unpublished_pages'|trans }}</button>
+                        <details class="accordion">
+                            <summary>{{ 'neusta_pimcore_areabrick_config.areabricks.overview.table.unpublished_pages'|trans }}</summary>
                             <ul>
                                 {% for page in unpublished_pages %}
                                     <li>
@@ -55,7 +53,7 @@
                                     </li>
                                 {% endfor %}
                             </ul>
-                        </div>
+                        </details>
                     {% endif %}
                 </td>
                 {% if hasAdditionalProperties %}