disclosure

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import {
  Disclosure,
  DisclosureContent,
  useDisclosureState,
} from "ariakit/disclosure";
import "./style.css";

export default function Example() {
  const disclosure = useDisclosureState();
  return (
    <div className="wrapper">
      <Disclosure state={disclosure} className="button">
        What are vegetables?
      </Disclosure>
      <DisclosureContent state={disclosure}>
        <p>
          Vegetables are parts of plants that are consumed by humans or other
          animals as food. The original meaning is still commonly used and is
          applied to plants collectively to refer to all edible plant matter,
          including the flowers, fruits, stems, leaves, roots, and seeds.
        </p>
      </DisclosureContent>
    </div>
  );
}