Accordion
EuiFlexGroup's negative margins can sometimes create scrollbars within EuiAccordion because of the overflow tricks used to hide content. If you run into this issue make sure your paddingSize prop is large enough to account for the gutterSize of any nested flex groups.
Unstyled
EuiAccordion has been purposely designed with minimal styles, allowing you to visually enhance it as needed (see the accordion form example). The only styling enforced by EUI is the caret icon, which indicates to users that the item can be opened.
A buttonContent prop defines the content of the clickable area. On click it will expose the children and animate based on the height of those children.
For styling needs, classes can be individually applied with className (for the entire accordion), and buttonClassName (for the clickable area).
Any content inside of EuiAccordion will appear here.
Multiple accordions
Use any number of EuiAccordion elements to visually display them as a group.
Due to the previously mentioned bare styles, it is recommended to place an EuiSpacer between accordion items. Padding within each accordion item can be applied via the paddingSize prop.
The content inside can be of any height.
The content inside can be of any height.
The content inside can be of any height.
The content inside can be of any height.
The content inside can be of any height.
The content inside can be of any height.
The content inside can be of any height.
The content inside can be of any height.
The content inside can be of any height.
This content area will grow to accomodate when the accordion below opens
The content inside can be of any height.
The content inside can be of any height.
The content inside can be of any height.
The content inside can be of any height.
The content inside can be of any height.
The content inside can be of any height.
Accordion can have extra actions
Use the extraAction prop to pass an extra action displayed on the right of any accordion. Usually this is a delete or button, but can be anything. Note that this action is separate from the click state that expands the accordion. This is needed to make it accessible.
Accordion can be opened on initial render
Use the initialIsOpen prop to open the accordion when first rendered.
Any content inside of EuiAccordion will appear here.
Accordion can call a function on open and close
Use the onToggle prop to pass a callback method that will be called on open and close.
Any content inside of EuiAccordion will appear here.
Accordion content can dynamically change height
If an accordion’s content changes height while the accordion is open, it will resize dynamically.
Row 1
Accordion for forms
Putting it all together. Using the classNamesand extraAction as explained above, we can style the accordion in a way common for form use.