Blaze UI Accordion

Last Updated : 21 Nov, 2022

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.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" />
    <script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
    </script>
    <script nomodule="" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
    </script>
</head>
<body>
    <div class="o-container" style="padding:1em;">
        <center>
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
            <strong> Blaze UI accordions </strong>
            <br> <br>
        </center>
        <blaze-accordion>
            <blaze-accordion-pane open header="Click me">
                This is an example of accordion
            </blaze-accordion-pane>
            <blaze-accordion-pane header="Click this also">
                This is another pane
            </blaze-accordion-pane>
            <blaze-accordion-pane header="Click this">
                This is another pane
            </blaze-accordion-pane>
            <blaze-accordion-pane header="Click this">
                This is another pane
            </blaze-accordion-pane>
        </blaze-accordion>
    </div>
</body>
</html>

Output:

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

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" />
    <script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
    </script>
    <script nomodule="" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
    </script>
</head>
<body>
    <div class="o-container" style="padding:1em;">
        <center>
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
            <strong> Blaze UI accordions </strong>
            <br> <br>
        </center>
        <blaze-accordion>
            <blaze-accordion-pane open header="Database">
                <blaze-accordion-pane header="Mysql">
                Mysql is a relational DBMS.
                </blaze-accordion-pane>
                <blaze-accordion-pane header="Oracle">
                Oracle Corporation is an American multinational computer technology corporation
                </blaze-accordion-pane>
                 
                <blaze-accordion-pane header="DB2">
                Db2 is a database management system developed by IBM
                </blaze-accordion-pane>
            </blaze-accordion-pane>
        </blaze-accordion>
    </div>
</body>
</html>