Grabbed dndbeyond's source code

```
~/go/bin/sourcemapper -output ddb -jsurl https://media.dndbeyond.com/character-app/static/js/main.90aa78c5.js
```

ddb_main/components/CollapsibleContent/CollapsibleContent.tsx

@@ -0,0 +1,62 @@
+import clsx from "clsx";
+import { FC, HTMLAttributes, ReactNode, useState } from "react";
+
+import { HtmlContent } from "../HtmlContent";
+import styles from "./styles.module.css";
+
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  children: ReactNode;
+  className?: string;
+  forceShow?: boolean;
+  heading?: ReactNode;
+  maxLength?: number;
+}
+
+/**
+ * A component that will display a "Show More" button if the content is longer
+ * than the maxLength prop. It will also accept a heading prop to display text
+ * above the content.
+ */
+export const CollapsibleContent: FC<Props> = ({
+  forceShow,
+  className,
+  children,
+  heading,
+  maxLength = 600,
+  ...props
+}) => {
+  const [isOpen, setIsOpen] = useState(forceShow);
+
+  const handleToggleClick = (): void => {
+    setIsOpen((prev) => !prev);
+  };
+
+  if (typeof children === "string" && children?.length <= maxLength && !heading)
+    return (
+      <HtmlContent html={children as string} className={className} {...props} />
+    );
+
+  return (
+    <div
+      className={clsx([
+        styles.collapsible,
+        heading && styles.withHeading,
+        isOpen && styles.open,
+        className,
+      ])}
+      {...props}
+    >
+      {heading && <div>{heading}</div>}
+      {typeof children === "string" ? (
+        <HtmlContent className={styles.content} html={children as string} />
+      ) : (
+        <div className={styles.content}>{children}</div>
+      )}
+      {!forceShow && (
+        <button className={styles.button} onClick={handleToggleClick}>
+          {isOpen ? "Show Less" : "Show More"}
+        </button>
+      )}
+    </div>
+  );
+};