Disclosure

Single animated toggle. Height animates from 0 to auto on open using AnimatePresence.

Use and inspectUse this when the motion supports the surrounding content. Connect callbacks and state to your app, keep the reset preview as a local demonstration, and add a reduced-motion fallback for movement or looping. The preview is synthetic; it does not call a backend.Next: inspect the source below and replace the demo inputs with your own data.

DisclosureSingle animated toggle. Height animates from 0 to auto on open using AnimatePresence.

"use client";
import { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";

type DisclosureProps = {
  label: string | React.ReactNode;
  children: React.ReactNode;
};

export function Disclosure({ label, children }: DisclosureProps) {
  const [open, setOpen] = useState(false);

  return (
    <div className="mp-disclosure">
      <button className="mp-disclosure-trigger" onClick={() => setOpen(!open)}>
        <span className="mp-disclosure-label">{label}</span>
        <motion.span
          className="mp-disclosure-icon"
          animate={{ rotate: open ? 180 : 0 }}
          transition={{ duration: 0.2, ease: "easeOut" }}
        >
          ↓
        </motion.span>
      </button>
      <AnimatePresence initial={false}>
        {open && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.22, ease: "easeInOut" }}
            style={{ overflow: "hidden" }}
          >
            <div className="mp-disclosure-content">{children}</div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

Installnpm install framer-motion

Props

Prop	Type	Default	Description
labelrequired	string \| ReactNode	—	Trigger label
childrenrequired	ReactNode	—	Disclosed content