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⁠.

Disclosure

Edit example

1234567891011121314151617181920212223
import "./style.css";
import * as Ariakit from "@ariakit/react";

export default function Example() {
  return (
    <div className="wrapper">
      <Ariakit.DisclosureProvider>
        <Ariakit.Disclosure className="button">
          What are vegetables?
        </Ariakit.Disclosure>
        <Ariakit.DisclosureContent 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>
        </Ariakit.DisclosureContent>
      </Ariakit.DisclosureProvider>
    </div>
  );
}

import "./style.css";
import * as Ariakit from "@ariakit/react";

export default function Example() {
  return (
    <div className="wrapper">
      <Ariakit.DisclosureProvider>
        <Ariakit.Disclosure className="button">
          What are vegetables?
        </Ariakit.Disclosure>
        <Ariakit.DisclosureContent 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>
        </Ariakit.DisclosureContent>
      </Ariakit.DisclosureProvider>
    </div>
  );
}

Examples

Animated DisclosureApplying plain CSS transitions to Disclosure components to animate the DisclosureContent height as it expands and collapses.

View all Disclosure examples

API

useDisclosureStore()
useDisclosureContext()

<DisclosureProvider>
  <Disclosure />
  <DisclosureContent />
</DisclosureProvider>
useDisclosureStore()
useDisclosureContext()

<DisclosureProvider>
  <Disclosure />
  <DisclosureContent />
</DisclosureProvider>

Styling

Styling the expanded state

You can use the aria-expanded attribute to style the expanded state:

.disclosure[aria-expanded="true"] {
  color: red;
}
.disclosure[aria-expanded="true"] {
  color: red;
}

Learn more on the Styling guide.

Disclosure

Examples

API

Styling

Styling the expanded state

Stay tuned