For the most part, you'll want to be able to easily define accordion tabs and easily intercept user interaction with different accordion tabs.

For defining accordion tabs, you can use a <div /> element or any other React.Node as children inside the <Accordion />, as shown in the first example. To intercept user clicks on accordion tab titles, you can use onActivate(activeIndex).

Without any additional configuration, every tab of the accordion must be a React.Node (e.g. <div />, so it can't be plain text or a number) with a tabTitle prop.

By default, expanding or collapsing a tab will use a transition when going from one state to another. The transition duration and the transition function can be controlled using the transitionDuration and transitionFunction props.

You can use the <Accordion /> without any transitions, by setting transition=false.

When using the <Accordion /> with the default theme, tab contents have 20px of padding. You can override that via the tabStyle prop defined on the <Accordion /> or for specific tabs by specifying tabProps.style.

By default, the <Accordion /> tab content is wrapped into a container which will flex to fill the size given by the <Accordion /> or the parent node of the <Accordion />. This means that the content will not necessarily be as large or as tall as the wrapper. To force the content to have the size of the wrapper, set stretchTabContent=true. See the demo below in order to see tab content streching in action.

You can use any React components as children for the accordion and they will get rendered as accordion tabs.

In the above example, we are using scrollTabContent=true to force the contents of the accordion show scrollbars, and not the accordion content wrapper. More specifically, this means that in the first tab, where we have a TabPanel rendered, the <TabPanel /> will show scrollbars when necessary, not the <Accordion />.

In this case, the component rendered as the tab contents is responsible for using overflow: auto so that it properly renders a scrollbar when needed.