diff --git a/gatsby-ssr.js b/gatsby-ssr.js
index 8f3091cf9..c9533d8a3 100644
--- a/gatsby-ssr.js
+++ b/gatsby-ssr.js
@@ -16,14 +16,6 @@ export const onRenderBody = ({ setHeadComponents }) => {
         __html: `!function(e,n){var t=document.createElement("script"),o=null,x="pathway";t.async=!0,t.src='https://'+x+'.mongodb.com/'+(e?x+'-debug.js':''),document.head.append(t),t.addEventListener("load",function(){o=window.pathway.default,(n&&o.configure(n)),o.createProfile("mongodbcom").load(),window.segment=o})}();`,
       }}
     />,
-    // Delighted
-    <script
-      key="delighted"
-      type="text/javascript"
-      dangerouslySetInnerHTML={{
-        __html: `!function(e,t,r,n){if(!e[n]){for(var a=e[n]=[],i=["survey","reset","config","init","set","get","event","identify","track","page","screen","group","alias"],s=0;s<i.length;s++){var c=i[s];a[c]=a[c]||function(e){return function(){var t=Array.prototype.slice.call(arguments);a.push([e,t])}}(c)}a.SNIPPET_VERSION="1.0.1";var o=t.createElement("script");o.type="text/javascript",o.async=!0,o.src="https://d2yyd1h5u9mauk.cloudfront.net/integrations/web/v1/library/"+r+"/"+n+".js";var l=t.getElementsByTagName("script")[0];l.parentNode.insertBefore(o,l)}}(window,document,"Dk30CC86ba0nATlK","delighted");`,
-      }}
-    />,
     // Client-side redirect based on browser's language settings
     <script
       key="browser-lang-redirect"
diff --git a/src/components/Collapsible/index.js b/src/components/Collapsible/index.js
index ed9a6e094..44a8de17a 100644
--- a/src/components/Collapsible/index.js
+++ b/src/components/Collapsible/index.js
@@ -1,12 +1,13 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useLocation } from '@gatsbyjs/reach-router';
 import Box from '@leafygreen-ui/box';
 import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
 import { cx } from '@leafygreen-ui/emotion';
-import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { Body } from '@leafygreen-ui/typography';
+import { findAllNestedAttribute } from '../../utils/find-all-nested-attribute';
+import { isBrowser } from '../../utils/is-browser';
 import { reportAnalytics } from '../../utils/report-analytics';
 import ComponentFactory from '../ComponentFactory';
 import Heading from '../Heading';
@@ -14,17 +15,20 @@ import { collapsibleStyle, headerContainerStyle, headerStyle, iconStyle, innerCo
 import './styles.css';
 
 const Collapsible = ({ nodeData: { children, options }, ...rest }) => {
-  const { darkMode } = useDarkMode();
   const { id, heading, sub_heading: subHeading } = options;
-  const [open, setOpen] = useState(false);
   const { hash } = useLocation();
-  const headingNodeData = useMemo(
-    () => ({
-      id,
-      children: [{ type: 'text', value: heading }],
-    }),
-    [heading, id]
-  );
+
+  // get a list of all ids in collapsible content
+  // in order to set collapsible open, if any are found in url hash
+  const childrenHashIds = useMemo(() => {
+    return findAllNestedAttribute(children, 'id');
+  }, [children]);
+
+  const [open, setOpen] = useState(false);
+  const headingNodeData = {
+    id,
+    children: [{ type: 'text', value: heading }],
+  };
 
   const onIconClick = useCallback(() => {
     reportAnalytics('CollapsibleClicked', {
@@ -34,12 +38,31 @@ const Collapsible = ({ nodeData: { children, options }, ...rest }) => {
     setOpen(!open);
   }, [heading, open]);
 
+  // open the collapsible if the hash in URL is equal to collapsible heading id,
+  // or if the collapsible's children has the id
+  useEffect(() => {
+    if (!isBrowser) {
+      return;
+    }
+    const hashId = hash?.slice(1) ?? '';
+    if (id === hashId || childrenHashIds.includes(hashId)) {
+      return setOpen(true);
+    }
+  }, [childrenHashIds, hash, id]);
+
+  const rendered = useRef(false);
+
+  // on first open, scroll the child with the URL hash id into view
   useEffect(() => {
+    if (!open) return;
+    if (rendered.current) return;
+    rendered.current = true;
     const hashId = hash?.slice(1) ?? '';
-    if (id === hashId) {
-      setOpen(true);
+    if (childrenHashIds.includes(hashId)) {
+      const child = document?.querySelector(`#${hashId}`);
+      child && child.scrollIntoView({ block: 'start', inline: 'nearest', behavior: 'smooth' });
     }
-  }, [hash, id]);
+  }, [childrenHashIds, hash, open]);
 
   return (
     <Box className={cx('collapsible', collapsibleStyle)}>
@@ -50,11 +73,7 @@ const Collapsible = ({ nodeData: { children, options }, ...rest }) => {
           </Heading>
           <Body baseFontSize={13}>{subHeading}</Body>
         </Box>
-        <IconButton
-          className={iconStyle(darkMode)}
-          aria-labelledby={'Expand the collapsed content'}
-          onClick={onIconClick}
-        >
+        <IconButton className={iconStyle} aria-labelledby={'Expand the collapsed content'} onClick={onIconClick}>
           <Icon glyph={open ? 'ChevronDown' : 'ChevronRight'} />
         </IconButton>
       </Box>
diff --git a/src/components/Collapsible/styles.js b/src/components/Collapsible/styles.js
index 423feeefb..c49981825 100644
--- a/src/components/Collapsible/styles.js
+++ b/src/components/Collapsible/styles.js
@@ -26,16 +26,16 @@ export const headerStyle = css`
   margin-top: 0;
 `;
 
-export const iconStyle = (darkMode) => css`
+export const iconStyle = css`
   align-self: center;
   flex-shrink: 0;
-  ${!darkMode && `color: ${palette.gray.dark1}`}
 `;
 
 export const innerContentStyle = (open) => css`
   overflow: hidden;
   height: 0;
-  visibility: hidden;
+  color: --font-color-primary;
+
   ${open && `height: auto;`}
   ${open && `visibility: visible;`}
 `;
diff --git a/src/hooks/useDelightedSurvey.js b/src/hooks/useDelightedSurvey.js
deleted file mode 100644
index 82126a56f..000000000
--- a/src/hooks/useDelightedSurvey.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useEffect } from 'react';
-import { useSiteMetadata } from './use-site-metadata';
-
-const ENABLED_SITES = new Set(['atlas-app-services', 'cloud-docs', 'docs', 'golang', 'java', 'node', 'realm']);
-const ENABLED_ENVS = new Set(['dotcomprd', 'production']);
-
-export const useDelightedSurvey = (slug, project) => {
-  const { parserBranch, snootyEnv } = useSiteMetadata();
-
-  useEffect(() => {
-    if (ENABLED_ENVS.has(snootyEnv) && ENABLED_SITES.has(project)) {
-      let projectName = project;
-      if (project === 'docs') {
-        projectName = 'manual';
-      } else if (project === 'cloud-docs') {
-        projectName = 'atlas';
-      }
-
-      window.delighted.survey({
-        minTimeOnPage: 90,
-        properties: {
-          branch: parserBranch,
-          project: projectName,
-        },
-      });
-    }
-  }, [parserBranch, project, slug, snootyEnv]);
-};
diff --git a/src/layouts/index.js b/src/layouts/index.js
index 6e1f11d7f..71f5e4cdc 100644
--- a/src/layouts/index.js
+++ b/src/layouts/index.js
@@ -7,7 +7,6 @@ import Header from '../components/Header';
 import { Sidenav } from '../components/Sidenav';
 import RootProvider from '../components/RootProvider';
 import { getTemplate } from '../utils/get-template';
-import { useDelightedSurvey } from '../hooks/useDelightedSurvey';
 import { usePresentationMode } from '../hooks/use-presentation-mode';
 import { theme } from '../theme/docsTheme';
 import useSnootyMetadata from '../utils/use-snooty-metadata';
@@ -99,7 +98,6 @@ const DefaultLayout = ({ children, data: { page }, pageContext: { slug, repoBran
     () => page?.ast?.options?.title || slugToTitle?.[slug === '/' ? 'index' : slug],
     [slug] // eslint-disable-line react-hooks/exhaustive-deps
   );
-  useDelightedSurvey(slug, project);
 
   return (
     <>
diff --git a/src/layouts/preview-layout.js b/src/layouts/preview-layout.js
index e30d396df..8256b0b35 100644
--- a/src/layouts/preview-layout.js
+++ b/src/layouts/preview-layout.js
@@ -7,7 +7,6 @@ import PreviewHeader from '../components/Header/preview-header';
 import { Sidenav } from '../components/Sidenav';
 import RootProvider from '../components/RootProvider';
 import { getTemplate } from '../utils/get-template';
-import { useDelightedSurvey } from '../hooks/useDelightedSurvey';
 import { theme } from '../theme/docsTheme';
 import { MetadataProvider } from '../utils/use-snooty-metadata';
 
@@ -142,7 +141,6 @@ const DefaultLayout = ({
   const { chapters, guides, slugToTitle, toctree, eol } = metadata;
 
   const pageTitle = React.useMemo(() => page?.options?.title || slugToTitle?.[slug === '/' ? 'index' : slug], [slug]); // eslint-disable-line react-hooks/exhaustive-deps
-  useDelightedSurvey(slug, metadata.project);
 
   return (
     <>
diff --git a/src/utils/find-all-nested-attribute.js b/src/utils/find-all-nested-attribute.js
new file mode 100644
index 000000000..5fb693087
--- /dev/null
+++ b/src/utils/find-all-nested-attribute.js
@@ -0,0 +1,19 @@
+/**
+ * Search all children nodes for attribute
+ * @param   {node[]}    nodes
+ * @param   {string}    attribute
+ * @returns {string[]}
+ */
+export const findAllNestedAttribute = (nodes, attribute) => {
+  const results = [];
+  const searchNode = (node) => {
+    if (Object.hasOwn(node, attribute)) {
+      results.push(node[attribute]);
+    }
+    if (node.children) {
+      node.children.forEach(searchNode);
+    }
+  };
+  nodes.forEach(searchNode);
+  return results;
+};
diff --git a/tests/unit/Collapsible.test.js b/tests/unit/Collapsible.test.js
index 80fbe482e..9e6517a02 100644
--- a/tests/unit/Collapsible.test.js
+++ b/tests/unit/Collapsible.test.js
@@ -22,7 +22,6 @@ describe('collapsible component', () => {
     let icon = button.querySelector('[role=img]');
     expect(icon.getAttribute('aria-label')).toContain('Chevron');
     expect(icon.getAttribute('aria-label')).toContain('Right');
-    expect(collapsedContent).not.toBeVisible();
 
     await act(async () => {
       button.click();
diff --git a/tests/unit/__snapshots__/Collapsible.test.js.snap b/tests/unit/__snapshots__/Collapsible.test.js.snap
index 6a068d4b6..f949835d2 100644
--- a/tests/unit/__snapshots__/Collapsible.test.js.snap
+++ b/tests/unit/__snapshots__/Collapsible.test.js.snap
@@ -101,7 +101,6 @@ exports[`collapsible component renders all the content in the options and childr
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
-  color: #5C6C75;
 }
 
 .emotion-8:before {
@@ -175,7 +174,7 @@ exports[`collapsible component renders all the content in the options and childr
 .emotion-10 {
   overflow: hidden;
   height: 0;
-  visibility: hidden;
+  color: --font-color-primary;
 }
 
 .emotion-11 {
diff --git a/tests/unit/useDelightedSurvey.test.js b/tests/unit/useDelightedSurvey.test.js
deleted file mode 100644
index 34a8b24ae..000000000
--- a/tests/unit/useDelightedSurvey.test.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react';
-import * as Gatsby from 'gatsby';
-import { render } from '@testing-library/react';
-import { useDelightedSurvey } from '../../src/hooks/useDelightedSurvey';
-
-const useStaticQuery = jest.spyOn(Gatsby, 'useStaticQuery');
-
-const mockStaticQuery = (mockBranch, mockEnv) => {
-  useStaticQuery.mockImplementation(() => ({
-    site: {
-      siteMetadata: {
-        parserBranch: mockBranch,
-        snootyEnv: mockEnv,
-      },
-    },
-  }));
-};
-
-const expectedSurveyObj = (expectedBranch, expectedProject) => ({
-  minTimeOnPage: 90,
-  properties: {
-    branch: expectedBranch,
-    project: expectedProject,
-  },
-});
-
-const TestComponent = ({ project }) => {
-  const slug = 'test';
-  useDelightedSurvey(slug, project);
-  return null;
-};
-
-describe('useDelightedSurvey()', () => {
-  let testSurveyObj;
-  window.delighted = {
-    survey: jest.fn((surveyObj) => {
-      testSurveyObj = surveyObj;
-    }),
-  };
-
-  beforeEach(() => {
-    testSurveyObj = {};
-  });
-
-  it('succeeds in showing a survey', () => {
-    const branch = 'test';
-    const project = 'node';
-    mockStaticQuery(branch, 'production');
-    render(<TestComponent project={project} />);
-    expect(testSurveyObj).toEqual(expectedSurveyObj(branch, project));
-  });
-
-  it('succeeds in reporting a project name different from its snooty project', () => {
-    const branch = 'test-different';
-    mockStaticQuery(branch, 'production');
-    render(<TestComponent project="cloud-docs" />);
-    expect(testSurveyObj).toEqual(expectedSurveyObj(branch, 'atlas'));
-  });
-
-  it('fails to report a survey when not in production', () => {
-    mockStaticQuery('test-not-production', 'staging');
-    render(<TestComponent project="cloud-docs" />);
-    expect(testSurveyObj).toEqual({});
-  });
-
-  it('fails to report a survey when project is not eligible', () => {
-    mockStaticQuery('test-not-project', 'production');
-    render(<TestComponent project="test-docs" />);
-    expect(testSurveyObj).toEqual({});
-  });
-});
diff --git a/tests/unit/utils/find-all-nested-attribute.test.js b/tests/unit/utils/find-all-nested-attribute.test.js
new file mode 100644
index 000000000..b264cccea
--- /dev/null
+++ b/tests/unit/utils/find-all-nested-attribute.test.js
@@ -0,0 +1,18 @@
+import { findAllNestedAttribute } from '../../../src/utils/find-all-nested-attribute';
+import figureData from '../data/Figure.test.json';
+import headingData from '../data/Heading.test.json';
+import footnoteData from '../data/Footnote.test.json';
+
+describe('findAllNestedAttribute', () => {
+  it('gets all attribute from one level of children', () => {
+    const res = findAllNestedAttribute([figureData, headingData, footnoteData], 'id');
+    expect(res).toEqual(['create-an-administrative-username-and-password', 'id8']);
+  });
+
+  it('gets all attributes from multiple children levels', () => {
+    const headingWithChildren = { ...headingData };
+    headingWithChildren.children = [headingData, footnoteData];
+    const res = findAllNestedAttribute([headingWithChildren], 'type');
+    expect(res).toEqual(['heading', 'heading', 'text', 'footnote', 'paragraph', 'text']);
+  });
+});