From 28274b7f48e11bd1c302e2bde6ccfbd211394860 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 28 May 2026 11:12:52 +0200
Subject: [PATCH] Add mobile-only toggle to show and hide Meldungen cards

---
 patterns/vsf-list-detailseite.html         | 23 ++++++++++++++++++++++
 styles/33-layouts-vsf-list-detailseite.css |  8 ++++++++
 2 files changed, 31 insertions(+)

diff --git a/patterns/vsf-list-detailseite.html b/patterns/vsf-list-detailseite.html
index 06ac881..b42274d 100644
--- a/patterns/vsf-list-detailseite.html
+++ b/patterns/vsf-list-detailseite.html
@@ -111,6 +111,9 @@
       <aside class="sg-vsf-list-detail-page__left-column" aria-label="Benachrichtigungen">
         <div class="sg-group-card" data-component="group-card">
           <h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Meldungen</h2>
+          <button class="sg-interaction-element sg-button sg-button--active sg-vsf-list-detail-page__mobile-toggle" type="button" data-toggle-target="meldungen" data-collapsed-label="Meldungen einblenden" data-expanded-label="Meldungen ausblenden" aria-expanded="true">
+            Meldungen ausblenden
+          </button>
           <article class="sg-card" data-component="notification-card" data-component-context="group-card">
             <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red" data-component-part="card-header">
               <p class="sg-body">
@@ -321,6 +324,26 @@
       });
     });
 
+    document.querySelectorAll('[data-toggle-target="meldungen"]').forEach((button) => {
+      button.addEventListener('click', () => {
+        const groupCard = button.closest('.sg-group-card');
+        if (!groupCard) {
+          return;
+        }
+
+        const cards = groupCard.querySelectorAll('[data-component="notification-card"]');
+        const isExpanded = button.getAttribute('aria-expanded') === 'true';
+        const nextExpanded = !isExpanded;
+
+        cards.forEach((card) => {
+          card.hidden = !nextExpanded;
+        });
+
+        button.setAttribute('aria-expanded', String(nextExpanded));
+        button.textContent = nextExpanded ? (button.dataset.expandedLabel || 'Meldungen ausblenden') : (button.dataset.collapsedLabel || 'Meldungen einblenden');
+      });
+    });
+
     const updatePulldownSelectionState = (demo) => {
       const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
       const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
diff --git a/styles/33-layouts-vsf-list-detailseite.css b/styles/33-layouts-vsf-list-detailseite.css
index 3649e86..019313b 100644
--- a/styles/33-layouts-vsf-list-detailseite.css
+++ b/styles/33-layouts-vsf-list-detailseite.css
@@ -64,6 +64,10 @@
   width: 100%;
 }
 
+.sg-vsf-list-detail-page__mobile-toggle {
+  display: none;
+}
+
 @media (max-width: 767px) {
   .sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
     width: 100%;
@@ -81,4 +85,8 @@
   .sg-vsf-list-detail-page__right-column {
     width: 100%;
   }
+
+  .sg-vsf-list-detail-page__mobile-toggle {
+    display: inline-flex;
+  }
 }