refactor: use the <details> tag for the accordion

teamneusta · Oct 25, 2024 · a9a9633 · a9a9633
1 parent 154bf1b
commit a9a9633
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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 %}