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.
Disclosure
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 "./style.css";
import * as Ariakit from "@ariakit/react";
export default function Example() {
return (
<div className="wrapper">
What are vegetables?
<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>
</div>
);
}
API
Styling
Styling the expanded state
You can use the aria-expanded
attribute to style the expanded state:
.disclosure[aria-expanded="true"] {
color: red;
}
Learn more on the Styling guide.
Follow updates
Join 1,000+ subscribers and receive monthly updates with the latest improvements on Components.