The Accordion component is a combination of an accessible button (header area) and a content container.
The component is made so you can compose different parts according to your technical needs.
By default the Accordion component will animate the users events, resulting in an ending height of
auto. This way the content is still responsive after the animation has ended.
Accordion.Provider to send along accordion properties to all nested accordions.
There is the
Accordion.Group. They are technical the same, except that
Accordion.Group will provide automatically an unique
group id, and with that, make all the nested accordions work together and close each other.
NB: Please to avoid using a group, because it initiate an unexpected behavior accessibility wise. Because the users interaction will trigger an action on another place, out the the current context, something some users not would expect to happen. It is an automated out of context UI execution.
Accordion with large title and content
NB: Please have a read on the unexpected behavior thoughts.
Accordion with a single container
A single container is used only for wider screens (desktop). And when the users screen is more narrow (mobile) it will change to a normal accordion. The change happens with CSS only, so it will not interrupt any React render.