Skip to content
Edit this page
+

Accordion

Accordions let users show and hide sections of related content on a page.

Integration with headless UI libraries

In the meantime, you can still adopt Joy UI today for building an accordion!

This document shows how to construct it with existing Joy UI components combined with popular headless UI libraries.

Using the List component

Joy UI's List components are perfect for building accordions because they stack vertically with an equal width.

  • <List /> - Wraps the accordion and sets component="div" to remove it from the accessibility tree.
  • <ListItemButton /> - The accordion header that toggles the visibility of the content.
  • <ListItem /> - The content container.

With Radix UI

Use Joy UI List components as a starting point and pass Radix's Accordion to component prop. Radix will enhance the functionalities by preserving the styles of Joy UI components.

Animation is created by targeting a CSS variable, --radix-accordion-content-height, provided by Radix Accordion. In this demo, it uses @mui/system keyframes API, same as emotion's keyframes, to build the animation stylesheet.

With Headless UI

Use Joy UI List components as a starting point and pass Headless UI's Accordion to component prop. Headless UI will enhance the functionalities by preserving the styles of Joy UI components.

Headless UI does not provide an API to create animation so you have to use other libraries or build it yourself.