Open In App

Blaze UI Trees Expandable and Expanded

Improve
Improve
Like Article
Like
Save
Share
Report

Blaze UI is a CSS open-source framework. It is a lightweight UI toolkit and 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. It project is available open-source so a large community maintains it.

In this article, we’ll see Blaze UI Trees Expandable and Expanded. Blaze UI is a free, open-source UI toolkit to build a great website. It provides you with various features like responsiveness, custom components, etc. The Trees provide the users with a hierarchical tree-like structure from which they can display various lists of items with sub-items in them.

Blaze UI Trees Expandable and Expanded Classes:

  • c-tree: This class is used to create a Tree expandable structure.
  • c-tree__item: This class is used to add a tree item list in the main tree component.

Syntax:

<div role="tree" class="c-tree">
  <button role="treeitem" aria-expanded="false" 
    class="c-tree__item">Directory 1</button>
  <button role="treeitem" aria-expanded="false" 
    class="c-tree__item">Directory 2</button>
  <div role="tree" class="c-tree">
    <span role="treeitem" class="c-tree__item">File 1</span>
    <span role="treeitem" class="c-tree__item">File 2</span>
  </div>
</div>

Example 1: Below example demonstrates the Trees Expanded.

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">
    <title>Blaze UI</title>
    <link rel="stylesheet" href=
</head>
<body>
    <div class="o-container o-container--medium">
        <h1 style="color: green">GeeksforGeeks</h1>
        <h2>Blaze UI Trees Expandable and Expanded </h2>
        <div role="tree" class="c-tree">
            <button role="treeitem" aria-expanded="false" 
                class="c-tree__item">Programming</button>
            <button role="treeitem" aria-expanded="false" 
                class="c-tree__item">Databases</button>
            <button role="treeitem" aria-expanded="true" 
                class="c-tree__item">Data Structures</button>
            <div role="tree" class="c-tree">
              <span role="treeitem" class="c-tree__item">
                  Arrays
                </span>
              <span role="treeitem" class="c-tree__item">
                  Linked List
                </span>
              <span role="treeitem" class="c-tree__item">
                  Stacks
                </span>
            </div>
            <button role="treeitem" aria-expanded="false" 
                class="c-tree__item">
                Competitive Programming
            </button>
            <button role="treeitem" aria-expanded="false" 
                class="c-tree__item">Jobs</button>
            <div role="tree" class="c-tree">
              <span role="treeitem" 
                class="c-tree__item u-text--quiet">
                (empty)
              </span>
            </div>
          </div>
    </div>
</body>
</html>


Output:

 

Example 2: Below example demonstrates the Trees are Expandable.

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"/>
    <title>Blaze UI</title>
    <link rel="stylesheet" href=
    <style>
        ul, #myUL {
          list-style-type: none;
        }
        .caret::before {
          content: "\25B6";
          color: black;
          display: inline-block;
          margin-right: 6px;
        }
        .nested {
          display: none;
        }
        .active {
          display: block;
        }
        </style>
  </head>
  <body>
    <div class="o-container o-container--medium">
      <h1 style="color: green">GeeksforGeeks</h1>
      <h2>Blaze UI Trees Expandable and Expanded</h2>
      <div role="tree" id="myUL" class="c-tree">
        <button role="treeitem" aria-expanded="false" 
            class="c-tree__item caret">Courses</button>
          <ul class="nested">
            <button role="treeitem" aria-expanded="false" 
                class="c-tree__item caret">Self Paced</button>
              <ul class="nested">
                <span role="treeitem" class="c-tree__item">
                    DSA Self Paced
                </span>
                <span role="treeitem" class="c-tree__item">
                    SDE Theory
                </span>
              </ul>
          </ul>
        </li>
        <button role="treeitem" aria-expanded="false" 
            class="c-tree__item caret">Tutorials</button>
        <button role="treeitem" aria-expanded="false" 
            class="c-tree__item caret">Articles</button>
    </div>
    <!-- For toggling the tree lists -->
      <script>
      var toggler = document.getElementsByClassName("caret");
      var i;
      for (i = 0; i < toggler.length; i++) {
        toggler[i].addEventListener("click", function() {
          this.parentElement.querySelector(".nested")
            .classList.toggle("active");
          this.classList.toggle("caret-down");
        });
      }
      </script>
    </div>
  </body>
</html>


Output:

 

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



Last Updated : 26 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads