Skip to content
Related Articles

Related Articles

Improve Article
Create a Table of Content in Tree View Architecture using HTML, CSS and JavaScript
  • Last Updated : 31 Dec, 2019

The tree view elements are kind of dropdown menu however well organized. This kind of view gives your web site an organized look, to create a tree view architecture of a drop down 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 Tree View Architecture of elements.

  • HTML code:




    <!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="tuitorial">
            <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>
                        <spna 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>
                        <spna 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>
                            <spna class="gfg">GATE</span>
                        </li>
                        <li>
                            <spna class="gfg">ISRO CS</span>
                        </li>
                        <li>
                            <spna class="gfg">UGC NET CS</span>
                        </li>
                        <li>
                            <spna class="gfg">CS Subjects</span>
                        </li>
                        <li>
                            < class="gfg">Web Technologies</span>
                        </li>
                    </li>    
                </ol>
            </li>
        </ul>
    </body>
       
    </html>
Designing Structure: In the previous section, we have created the structure of the basic tree view elements. In this section, we will design the structure for the tree view.
  • CSS code:



    <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 code:



    <script>
        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");
                }
            );
        }
    </script>
Combine the HTML, CSS, and JavaScript code: This is the final code after combining the above sections. It will display the Table of Content in Tree View Architecture.



<!DOCTYPE html>
<html>
   
<head>
    <title>
        Create a Table of Content in Tree
        View Architecture using HTML, CSS
        and JavaScript
    </title>
      
    <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>
</head>
   
<body>
    <h1>GeeksforGeeks</h1>
    <b>A Computer Science Portal for Geeks</b>
    <br>
    <ul id="tuitorial">
        <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>
                    <spna 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>
                    <spna 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><spna class="gfg">GATE</span></li>
                    <li><spna class="gfg">ISRO CS</span></li>
                    <li><spna class="gfg">UGC NET CS</span></li>
                    <li><spna class="gfg">CS Subjects</span></li>
                    <li><spna class="gfg">Web Technologies</span></li>
                </li>
            </ol>
        </li>
    </ul>
   
    <script>
        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");
                }
            );
        }
    </script>
</body>
   
</html>
Output:



My Personal Notes
arrow_drop_up
Next

How to Check if an element is a child of a parent using JavaScript?
Recommended Articles
Page :
How to create table with 100% width, with vertical scroll inside table body in HTML ?
11, Mar 19
How to group footer content in form of table using HTML ?
14, Oct 20
HTML content modification using Javascript
18, Apr 19
How to get HTML content of an iFrame using JavaScript ?
04, Jun 20
How to Create Time-Table schedule using HTML ?
21, Aug 20
How to preview Image on click in Gallery View using HTML, CSS and JavaScript ?
14, Oct 20
How to add tooltip to HTML table cell without using JavaScript ?
11, Sep 19
How to Remove Column from HTML Table using JavaScript ?
19, May 20
How to make HTML table expand on click using JavaScript ?
10, Jun 20
How to convert JSON data to a html table using JavaScript/jQuery ?
05, Sep 19
Model-View-Controller(MVC) architecture for Node applications
14, Jun 18
How to create a weight converter with HTML and JavaScript ?
14, Sep 20
How to Create Scroll Indicator using HTML CSS and JavaScript ?
28, May 20
How to create Text Editor using Javascript and HTML ?
14, Apr 21
How to create Expanding Cards using HTML, CSS and Javascript ?
05, Mar 21
How to create fullscreen search bar using HTML , CSS and JavaScript ?
17, Mar 21
How to create RGB color generator using HTML CSS and JavaScript ?
28, Jan 21
How to Create a Binary Calculator using HTML, CSS and JavaScript?
01, Nov 20
How to create a revealing sidebar using HTML, CSS and JavaScript ?
30, Mar 21
How to create HTML list from JavaScript array ?
10, Mar 21
Create an Analog Clock using HTML, CSS and JavaScript
12, Mar 21
How to create Hex color generator using HTML CSS and JavaScript ?
02, Feb 21
How to Create Shrink Header on Scroll using HTML, CSS and JavaScript ?
05, Feb 20
Create a Music Website Template using HTML, CSS & JavaScript
08, Apr 21
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
Sabya_Samadder
@Sabya_Samadder
Vote for difficulty





Article Tags :
Practice Tags :
Report Issue

We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox