You should use the accordion component if there is insufficient space within the page to display the information or
if users need to see a overview of specific content that's related to one another.
When you should consider something else
Accordions hide content from the user, and there may be cases where users will miss content completely or not understand how
accordions work. It is not advisable to use the accordion for information that is essential to your users.
If users need to see all information on a single page, you may want to:
use well-formatted text instead which give clear distinction between headers, content and sections.
have essential information split up into smaller sections that can be displayed on a single page
Accordions increases the cognitive load for users, as decisions have to be made when
clicking on the headers. Users may also ignore important information if it is hidden in an accordion.
Replace *color* with contextual text color classes (is-danger, is-warning, is-success etc.) for various background color.
Remove border around the accordion.
To expand the accordion on page load.
Replace *size* with is-small, is-medium & is-large for various text sizes.
Having troubles with the guide? Please give us more details and we'll get back to you soon.