From 60f87a2d803d35f8f9a00cb98c3700af66a9a333 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Mon, 12 Dec 2022 12:45:52 +0000
Subject: [PATCH] Hide accordion content during `js-enabled` page load

Restores previous behaviour to avoid a visual layout shift as accordions jump from open to closed
---
 src/govuk/components/accordion/_index.scss | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/govuk/components/accordion/_index.scss b/src/govuk/components/accordion/_index.scss
index 1cae45bfaa..bd6dedb50f 100644
--- a/src/govuk/components/accordion/_index.scss
+++ b/src/govuk/components/accordion/_index.scss
@@ -46,17 +46,18 @@
       padding-top: 0;
     }
 
+    // Hide the body of collapsed sections by default for browsers that lack
+    // support for `content-visibility` paired with [hidden=until-found]
     .govuk-accordion__section-content {
+      display: none;
+
       @include govuk-responsive-padding(3, "top");
       @include govuk-responsive-padding(8, "bottom");
     }
 
-    // Manually apply display: none to browsers that don't have a user agent
-    // style for it, but override it with content-visibility if the browser
-    // supports that instead.
+    // Hide the body of collapsed sections using `content-visibility` to enable
+    // page search within [hidden=until-found] regions where browser supported
     .govuk-accordion__section-content[hidden] {
-      display: none;
-
       @supports (content-visibility: hidden) {
         content-visibility: hidden;
         display: inherit;
@@ -67,6 +68,11 @@
       padding-bottom: 0;
     }
 
+    // Show the body of expanded sections
+    .govuk-accordion__section--expanded .govuk-accordion__section-content {
+      display: block;
+    }
+
     .govuk-accordion__show-all {
       @include govuk-font($size: 19);
       position: relative;