From 82c31e038f734e04ff46eb525ca34759e99fe7b7 Mon Sep 17 00:00:00 2001
From: Charlotte <charlotte.emms@theguardian.com>
Date: Mon, 6 Jan 2025 17:56:55 +0000
Subject: [PATCH] fix persistence issue

---
 .../src/components/ShowHideButton.importable.tsx  | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/dotcom-rendering/src/components/ShowHideButton.importable.tsx b/dotcom-rendering/src/components/ShowHideButton.importable.tsx
index afdf2fbafb..afc70f8f39 100644
--- a/dotcom-rendering/src/components/ShowHideButton.importable.tsx
+++ b/dotcom-rendering/src/components/ShowHideButton.importable.tsx
@@ -40,8 +40,8 @@ const getContainerStates = (): ContainerStates => {
  * Component to toggle the visibility of a front container. Used within FrontSection.
  **/
 export const ShowHideButton = ({ sectionId }: Props) => {
-	const [isExpanded, setIsExpanded] = useState(true);
 	const [containerStates, setContainerStates] = useState<ContainerStates>({});
+	const [isExpanded, setIsExpanded] = useState(true);
 	const textShowHide = isExpanded ? 'Hide' : 'Show';
 	const isSignedIn = useIsSignedIn();
 
@@ -58,12 +58,21 @@ export const ShowHideButton = ({ sectionId }: Props) => {
 		}
 
 		storage.local.set(`gu.prefs.container-states`, containerStates);
-		setIsExpanded(!isExpanded);
 	};
 
 	useEffect(() => {
+		const section: Element | null =
+			window.document.getElementById(sectionId);
+
 		setContainerStates(getContainerStates());
-	}, []);
+
+		const isClosed = containerStates[sectionId] === 'closed';
+		setIsExpanded(!isClosed);
+
+		isClosed
+			? section?.classList.add('hidden')
+			: section?.classList.remove('hidden');
+	}, [containerStates, sectionId]);
 
 	return (
 		isSignedIn === true && (