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

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>
<!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>
<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>
<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:
CSS-Misc
HTML-Misc
JavaScript-Misc
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
CSS | :not(:last-child):after Selector
Making a div vertically scrollable using CSS
How to set fixed width for <td> in a table ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)