Ariakit
/
/
This site is under construction Subscribe to updates

Disclosure

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

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} className="content">
        <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>
  );
}

Installation

npm install ariakit

Learn more in Getting started.

API

useDisclosureState()

<Disclosure />
<DisclosureContent />

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 in Styling.