Click a button to either show (expand, open) or hide (collapse, close) a content element in React. This component is based on the WAI-ARIA Disclosure Pattern.

import * as Ariakit from "@ariakit/react";
import "./style.css";
export default function Example() {
return (
<div className="wrapper">
<Ariakit.Disclosure className="button">
What are vegetables?
<Ariakit.DisclosureContent className="content">
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.

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue