From 5bdd228f7e854d99658e23256a87e013821ba9a4 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:18:55 +0200
Subject: [PATCH] Replace inline notification toggle style with class-based
 state

---
 patterns/vsf-list-detailseite.html         | 11 ++++++-----
 styles/33-layouts-vsf-list-detailseite.css |  4 ++++
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/patterns/vsf-list-detailseite.html b/patterns/vsf-list-detailseite.html
index b9ae399..68b82c3 100644
--- a/patterns/vsf-list-detailseite.html
+++ b/patterns/vsf-list-detailseite.html
@@ -114,7 +114,7 @@
           <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">
+          <article class="sg-card sg-vsf-list-detail-page__notification-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">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
@@ -125,7 +125,7 @@
             </div>
           </article>
 
-          <article class="sg-card" data-component="notification-card" data-component-context="group-card">
+          <article class="sg-card sg-vsf-list-detail-page__notification-card" data-component="notification-card" data-component-context="group-card">
             <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green" data-component-part="card-header">
               <p class="sg-body">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
@@ -136,7 +136,7 @@
             </div>
           </article>
 
-          <article class="sg-card sg-card--notification-white" data-component="notification-card" data-component-context="group-card">
+          <article class="sg-card sg-card--notification-white sg-vsf-list-detail-page__notification-card" data-component="notification-card" data-component-context="group-card">
             <div class="sg-card-segment sg-card-segment--header sg-card-segment--white" data-component-part="card-header">
               <p class="sg-body">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
@@ -331,12 +331,13 @@
           return;
         }
 
-        const cards = groupCard.querySelectorAll('[data-component="notification-card"]');
+        const cards = groupCard.querySelectorAll('.sg-vsf-list-detail-page__notification-card');
         const isExpanded = button.getAttribute('aria-expanded') === 'true';
         const nextExpanded = !isExpanded;
 
         cards.forEach((card) => {
-          card.style.display = nextExpanded ? '' : 'none';
+          card.classList.toggle('sg-vsf-list-detail-page__notification-card--hidden', !nextExpanded);
+          card.setAttribute('aria-hidden', String(!nextExpanded));
         });
 
         button.setAttribute('aria-expanded', String(nextExpanded));
diff --git a/styles/33-layouts-vsf-list-detailseite.css b/styles/33-layouts-vsf-list-detailseite.css
index 8c8f182..4a2cf61 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__notification-card.sg-vsf-list-detail-page__notification-card--hidden {
+  display: none;
+}
+
 .sg-vsf-list-detail-page__mobile-toggle {
   display: none;
 }