Accordion.module.css

.accordionTrigger {
  position: relative;
  width: 100%;
}

.accordionTrigger[aria-expanded="true"] + .accordionBody {
  grid-template-rows: 1fr;
}

.accordionTrigger[aria-expanded="false"] + .accordionBody {
  grid-template-rows: 0fr;
}

.accordionBody {
  display: grid;
  transition: grid-template-rows 0.3s;
}

.accordionInner {
  overflow: hidden;
}

Accordion.tsx

"use client";

import { useEffect, useRef, useState } from "react";
import styles from "./Accordion.module.css";

type AccordionProps = {
  buttonName: string;
  panelName: string;
  open?: boolean;
  title: React.ReactNode;
  icon?: React.ReactNode;
  content: React.ReactNode;
};

export default function Accordion({ buttonName, panelName, open = false, title, icon, content }: AccordionProps) {
  const accordionTrigger = useRef<HTMLButtonElement | null>(null);
  const accordionBody = useRef<HTMLDivElement | null>(null);
  const [isOpen, setIsOpen] = useState(open);

  useEffect(() => {
    if (accordionBody.current && !open) {
      accordionBody.current.setAttribute("hidden", "until-found");
    }
  }, [open]);

  useEffect(() => {
    const observer = new MutationObserver((mutationsList) => {
      mutationsList.forEach(() => {
        if (accordionBody.current && accordionTrigger.current && !accordionBody.current.getAttribute("hidden") && accordionTrigger.current.getAttribute("aria-expanded") === "false") {
          setIsOpen((prev) => !prev);
        }
      });
    });

    if (accordionBody.current) {
      observer.observe(accordionBody.current, { attributes: true });
    }

    return () => {
      observer.disconnect();
    };
  }, []);

  const changeExpanded = () => {
    setIsOpen((prev) => !prev);
    if (accordionBody.current) {
      if (!isOpen) {
        accordionBody.current.removeAttribute("hidden");
      } else {
        setTimeout(() => {
          accordionBody.current?.setAttribute("hidden", "until-found");
        }, 300);
      }
    }
  };

  return (
    <>
      <button id={buttonName} ref={accordionTrigger} className={styles.accordionTrigger} aria-expanded={isOpen} role="tab" aria-controls={panelName} type="button" onClick={changeExpanded}>
        {title}
        {icon}
      </button>
      <div id={panelName} ref={accordionBody} className={styles.accordionBody} role="tabpanel" aria-labelledby={buttonName}>
        <div className={styles.accordionInner}>{content}</div>
      </div>
    </>
  );
}

page.tsx

import Accordion from "@/app/components/accordion/Accordion";

export default function TestPage() {
  return <Accordion buttonName="accordion-button-1" panelName="accordion-panel-1" title={<span>アコーディオンのタイトル</span>} icon={<span>▼</span>} content={<p>ここにアコーディオンの内容が入ります。</p>} />;
}