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 @@ -
+

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 @@

-
+

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 @@

-
+

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; }