Accordions are used to deliver a lot of content in a small space, allowing the user to expand and collapse the component to show or hide information.
Use accordions when you can apply progressive disclosure to the content you are dealing with. They are useful when you have a large amount of content, but limited space, since the header title gives an overview of the content that is hidden underneath it. Users can click on the collapsed accordion to expand the content area and view additional details.
View source on GitHub