Create a Table of Content in Tree View Architecture using HTML, CSS and JavaScript

The tree view elements are a kind of a dropdown menu however well organized. This kind of view gives your website an organized look, to create a tree view architecture of a drop we can use HTML, CSS, and JavaScript. We will divide the whole procedure into two sections Creating structure and Designing structure. Below both sections are elaborated

Creating Structure: In this section, we will create a basic structure of a Table of Content in the Tree View Architecture of elements.

Designing Structure: In the previous section, we created the structure of the basic tree view elements. In this section, we will design the structure for the tree view.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Create a Table of Content in Tree
        View Architecture using HTML, CSS
        and JavaScript
    </title>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <b>A Computer Science Portal for Geeks</b>
    <br>
      
    <ul id="tutorial">
        <li><span class="gfg">Tutorials</span>
            <ol class="cover" type="i">
                <li><span class="gfg">Algorithms</span>
                    <ol class="cover" type="a">
                        <li>
                        <span class="gfg">
                            Analysis of Algorithms
                        </span>
                          
                        <ol class="cover">
                            <li>Asymptotic Analysis</li>
                            <li>Worst, Average and Best Cases</li>
                            <li>Asymptotic Notations</li>
                            <li>Little o and little omega notations</li>
                            <li>Lower and Upper Bound Theory</li>
                            <li>Analysis of Loops</li>
                            <li>Solving Recurrences</li>
                            <li>Amortized Analysis</li>
                            <li>What does ‘Space Complexity’ mean?</li>
                            <li>Pseudo-polynomial Algorithms</li>
                            <li>Polynomial Time Approximation Scheme</li>
                            <li>A Time Complexity Question</li>
                        </ol>
                        </li>
                        <li>Searching Algorithms</li>
                        <li>Sorting Algorithms</li>
                        <li>Graph Algorithms</li>
                        <li>Pattern Searching</li>
                        <li>Geometric Algorithms</li>
                        <li>Mathematical</li>
                        <li>Randomized Algorithms</li>
                        <li>Greedy Algorithms</li>
                        <li>Dynamic Programming</li>
                        <li>Divide and Conquer</li>
                        <li>Backtracking</li>
                        <li>Branch and Bound</li>
                        <li>All Algorithms</li>
                    </ol>
                </li>
                <li>
                    <span class="gfg">
                        Data Structures
                    </span>
                    <ol class="cover" type="a">
                        <li>Arrays</li>
                        <li>Linked List</li>
                        <li>Stack</li>
                        <li>Queue</li>
                        <li>Binary Tree</li>
                        <li>Binary Search Tree</li>
                        <li>Heap</li>
                        <li>Hashing</li>
                        <li>Graph</li>
                        <li>Advanced Data Structure</li>
                        <li>Matrix</li>
                        <li>Strings</li>
                        <li>All Data Structures</li>
                    </ol>
                </li>
                <li>
                    <span> class="gfg">Languages</span>
                    <ol class="cover" type="a">
                        <li>C</li>
                        <li>C++</li>
                        <li>Java</li>
                        <li>Python</li>
                        <li>C#</li>
                        <li>Javascript</li>
                        <li>JQuery</li>
                        <li>SQL</li>
                        <li>PHP</li>
                        <li>Scala</li>
                        <li>Perl</li>
                        <li>Go Language</li>
                        <li>HTML</li>
                        <li>CSS</li>
                        <li>Kotlin</li>
                    </ol>
                </li>
                <li>
                    <span class="gfg">Interview Corner</span>
                    <ol class="cover" type="a">
                        <li>Company Preparation</li>
                        <li>Top Topics</li>
                        <li>Practice Company Questions</li>
                        <li>Interview Experiences</li>
                        <li>Experienced Interviews</li>
                        <li>Internship Interviews</li>
                        <li>Competitive Programming</li>
                        <li>Design Patterns</li>
                        <li>Multiple Choice Quizzes</li>
                    </ol>
                    <li>
                        <span> class="gfg">GATE</span>
                    </li>
                    <li>
                        <span> class="gfg">ISRO CS</span>
                    </li>
                    <li>
                        <span> class="gfg">UGC NET CS</span>
                    </li>
                    <li>
                        <span> class="gfg">CS Subjects</span>
                    </li>
                    <li>
                        < span class="gfg">Web Technologies</span>
                    </li>
            </ol>
        </li>
    </ul>
</body>
  
</html>

CSS

<style>
    h1 {
        color: green;
    }
      
    .gfg {
        cursor: pointer;
    }
      
    .gfg::before {
        content: "\25B6";
        color: black;
        display: inline-block;
        margin-right: 8px;
    }
      
    .cover {
        display: none;
    }
      
    .active {
        display: block;
    }
      
    ol [type=a] {
        background-color: yellow;
        color: purple;
    }
</style>

Javascript

var toggler = document.getElementsByClassName("gfg");
var i;
  
for (i = 0; i < toggler.length; i++) {
    toggler[i].addEventListener("click",
        function() {
            this.parentElement.querySelector(".cover")
                .classList.toggle("active");
            this.classList.toggle("gfg-down");
        }
    );
}

Output: Click here to check the live output

Last Updated : 24 Jan, 2023

Create a Table of Content in Tree View Architecture using HTML, CSS and JavaScript

HTML

CSS

Javascript

Please Login to comment...