Blaze UI Accordion

Blaze UI is a CSS open-source lightweight UI toolkit that provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive.

We all have seen Accordion on modern websites. It helps us to display a large amount of information in a very small place inside a container. It helps us arrange large amounts of data in a structured manner and we can access each of them by switching between the different items. In this article, we will learn how to make an accordion using the Blaze UI toolkit.

Blaze UI basic accordion Element:

• blaze-accordion:  This attribute is used to create the accordion.
• blaze-accordion-pane: This attribute is used to create the single accordion pane.

Syntax:

<blaze-accordion>
 <blaze-accordion-pane type="brand" header="..." open>
 ...
 </blaze--accordion-pane>
 <blaze-accordion-pane header="...">
 ...
 </blaze--accordion-pane>
 ... 
</blaze-accordion>

Example 1: The following code demonstrates the basic Blaze UI accordion with panes.

Output:

Example 2: In the below example, we have used nested accordions.

Output:

Reference: https://www.blazeui.com/components/accordions/