diff --git a/src/components/bookmarks/group.jsx b/src/components/bookmarks/group.jsx
index c5e6a2f1..107ceef4 100644
--- a/src/components/bookmarks/group.jsx
+++ b/src/components/bookmarks/group.jsx
@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useRef, useEffect } from "react";
import classNames from "classnames";
import { Disclosure, Transition } from "@headlessui/react";
import { MdKeyboardArrowDown } from "react-icons/md";
@@ -9,6 +9,11 @@ import ResolvedIcon from "components/resolvedicon";
export default function BookmarksGroup({ bookmarks, layout, disableCollapse }) {
const panel = useRef();
+
+ useEffect(() => {
+ if (layout?.initiallyCollapsed) panel.current.style.height = `0`;
+ }, [layout]);
+
return (
-
+
{({ open }) => (
<>
{layout?.header !== false && (
diff --git a/src/components/services/group.jsx b/src/components/services/group.jsx
index bcc3ce5d..0d0e4f6a 100644
--- a/src/components/services/group.jsx
+++ b/src/components/services/group.jsx
@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useRef, useEffect } from "react";
import classNames from "classnames";
import { Disclosure, Transition } from "@headlessui/react";
import { MdKeyboardArrowDown } from "react-icons/md";
@@ -9,6 +9,10 @@ import ResolvedIcon from "components/resolvedicon";
export default function ServicesGroup({ group, services, layout, fiveColumns, disableCollapse, useEqualHeights }) {
const panel = useRef();
+ useEffect(() => {
+ if (layout?.initiallyCollapsed) panel.current.style.height = `0`;
+ }, [layout, panel]);
+
return (
-
+
{({ open }) => (
<>
{layout?.header !== false && (