Adjusted faq

package.json

@@ -14,14 +14,14 @@
     "postinstall": "git config --local core.hooksPath .githooks/; exit 0"
   },
   "dependencies": {
-    "@heroicons/react": "^2.1.5",
-    "@mui/base": "5.0.0-beta.61",
+    "@heroicons/react": "^2.2.0",
+    "@mui/base": "5.0.0-beta.62",
     "@next/third-parties": "15.0.3",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@types/node": "22.9.0",
+    "@types/node": "22.9.3",
     "@types/react": "18.3.12",
     "@types/react-dom": "19.0.0-rc.1",
-    "algoliasearch": "^5.14.0",
+    "algoliasearch": "^5.15.0",
     "autoprefixer": "^10.4.20",
     "clsx": "^2.1.1",
     "decanter": "^7.3.0",
@@ -34,7 +34,7 @@
     "next": "15.0.3",
     "plaiceholder": "^3.0.0",
     "postcss": "^8.4.49",
-    "qs": "^6.13.0",
+    "qs": "^6.13.1",
     "react": "19.0.0-rc-fb9a90fa48-20240614",
     "react-dom": "19.0.0-rc-fb9a90fa48-20240614",
     "react-focus-lock": "^2.13.2",
@@ -44,43 +44,43 @@
     "react-super-responsive-table": "^6.0.0",
     "react-tiny-oembed": "^1.1.0",
     "sharp": "^0.33.5",
-    "tailwind-merge": "^2.5.4",
+    "tailwind-merge": "^2.5.5",
     "tailwindcss": "^3.4.15",
-    "typescript": "^5.6.3",
+    "typescript": "^5.7.2",
     "usehooks-ts": "^3.1.0"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3.1.0",
-    "@eslint/js": "^9.14.0",
+    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/js": "^9.15.0",
     "@graphql-codegen/add": "^5.0.3",
     "@graphql-codegen/cli": "^5.0.3",
     "@graphql-codegen/import-types-preset": "^3.0.0",
     "@graphql-codegen/typescript-graphql-request": "^6.2.0",
-    "@graphql-codegen/typescript-operations": "^4.3.1",
+    "@graphql-codegen/typescript-operations": "^4.4.0",
     "@next/bundle-analyzer": "15.0.3",
-    "@storybook/addon-essentials": "^8.4.4",
-    "@storybook/addon-interactions": "^8.4.4",
-    "@storybook/addon-links": "^8.4.4",
+    "@storybook/addon-essentials": "^8.4.5",
+    "@storybook/addon-interactions": "^8.4.5",
+    "@storybook/addon-links": "^8.4.5",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^8.4.4",
-    "@storybook/nextjs": "^8.4.4",
-    "@storybook/react": "^8.4.4",
+    "@storybook/blocks": "^8.4.5",
+    "@storybook/nextjs": "^8.4.5",
+    "@storybook/react": "^8.4.5",
     "@storybook/testing-library": "^0.2.2",
     "@types/react-slick": "^0.23.13",
     "concurrently": "^9.1.0",
     "encoding": "^0.1.13",
-    "eslint": "^9.14.0",
+    "eslint": "^9.15.0",
     "eslint-config-next": "15.0.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-storybook": "^0.11.0",
+    "eslint-plugin-storybook": "^0.11.1",
     "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.8",
+    "prettier-plugin-tailwindcss": "^0.6.9",
     "react-docgen": "^7.1.0",
-    "storybook": "^8.4.4",
+    "storybook": "^8.4.5",
     "storybook-addon-module-mock": "^1.3.4",
-    "tsconfig-paths-webpack-plugin": "^4.1.0",
-    "typescript-eslint": "^8.14.0"
+    "tsconfig-paths-webpack-plugin": "^4.2.0",
+    "typescript-eslint": "^8.15.0"
   },
   "packageManager": "[email protected]",
   "resolutions": {

src/components/paragraphs/stanford-faq/expand-collapse-all.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import Button from "@components/elements/button"
+import {useBoolean} from "usehooks-ts"
+import {HTMLAttributes, useEffect, useRef} from "react"
+
+type Props = HTMLAttributes<HTMLButtonElement>
+
+const ExpandCollapseAll = ({...props}: Props) => {
+  const {value: expand, toggle} = useBoolean(false)
+  const ref = useRef<HTMLButtonElement>(null)
+
+  useEffect(() => {
+    const buttons = ref.current?.parentElement?.parentElement?.getElementsByTagName("button") || []
+    for (let i = 0; i < buttons.length; i++) {
+      if (!expand && buttons[i].getAttribute("aria-expanded") === "false") {
+        buttons[i].click()
+      }
+
+      if (expand && buttons[i].getAttribute("aria-expanded") === "true") {
+        buttons[i].click()
+      }
+    }
+  }, [expand])
+
+  return (
+    // @ts-expect-error ref object type issue.
+    <Button ref={ref} buttonElem onClick={toggle} {...props}>
+      {expand ? "Expand All" : "Collapse All"}
+    </Button>
+  )
+}
+
+export default ExpandCollapseAll

src/components/paragraphs/stanford-faq/faq-paragraph.tsx

@@ -4,6 +4,7 @@ import {H2} from "@components/elements/headers"
 import Wysiwyg from "@components/elements/wysiwyg"
 import Accordion from "@components/elements/accordion"
 import twMerge from "@lib/utils/twMerge"
+import ExpandCollapseAll from "@components/paragraphs/stanford-faq/expand-collapse-all"
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   paragraph: ParagraphStanfordFaq
@@ -12,7 +13,11 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 const FaqParagraph = ({paragraph, ...props}: Props) => {
   return (
     <div {...props} className={twMerge("space-y-10", props.className)}>
-      {paragraph.suFaqHeadline && <H2>{paragraph.suFaqHeadline}</H2>}
+      <div className="flex items-center justify-between gap-20">
+        {paragraph.suFaqHeadline && <H2>{paragraph.suFaqHeadline}</H2>}
+
+        <ExpandCollapseAll className="ml-auto" />
+      </div>
       <Wysiwyg html={paragraph.suFaqDescription?.processed} />
 
       <div>