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

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

    edit
    close

    play_arrow

    link
    brightness_4
    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>

    chevron_right

    

    

    
                        filter_none
    

    

    

    

    

    • 



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:

    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    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> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    

    • 

  • JavaScript code:

    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    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> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    

    • 



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.











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!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> 



















                        chevron_right







                        filter_none








Output:




full-stack-img





    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
Sabya_Samadder
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.