Related Articles

Related Articles

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

                                        

                                        

                                            
Page : 

                                            

                                        

                                    

                                    

                                        

                                            

                

                    

            

            
                
How to create table with 100% width, with vertical scroll inside table body in HTML ?

                
11, Mar 19

            
        

            

            
                
How to wrap table cell <td> content using CSS ?

                
26, Apr 20

            
        

            

            
                
How to preview Image on click in Gallery View using HTML, CSS and JavaScript ?

                
14, Oct 20

            
        

            

            
                
How create table without using <table> tag ?

                
23, Apr 20

            
        

                

            

                

                    

            

            
                
How to group footer content in form of table using HTML ?

                
14, Oct 20

            
        

            

            
                
How to remove the table row in a table using JavaScript ?

                
23, May 19

            
        

            

            
                
How to create content area scrollable instead of the page using CSS ?

                
14, Dec 20

            
        

            

            
                
Model-View-Controller(MVC) architecture for Node applications

                
14, Jun 18

            
        

                

            

                

                    

            

            
                
How to create equal width table cell using CSS ?

                
26, Apr 20

            
        

            

            
                
Introduction to Model View View Model (MVVM)

                
29, May 19

            
        

            

            
                
Create a Mobile Toggle Navigation Menu using HTML, CSS and JavaScript

                
18, Nov 19

            
        

            

            
                
How to Create Shrink Header on Scroll using HTML, CSS and JavaScript ?

                
05, Feb 20

            
        

                

            

                

                    

            

            
                
How to create linear-gradient color generator using HTML, CSS and  JavaScript ?

                
18, Mar 20

            
        

            

            
                
How to Create Image Lightbox Gallery using HTML CSS and JavaScript ?

                
20, Mar 20

            
        

            

            
                
How to Create Full Screen Overlay Navigation Bar using HTML CSS and JavaScript ?

                
23, Apr 20

            
        

            

            
                
How to Create Scroll Indicator using HTML CSS and JavaScript ?

                
28, May 20

            
        

                

            

                

                    

            

            
                
How to Create a Binary Calculator using HTML, CSS and JavaScript?

                
01, Nov 20

            
        

            

            
                
Create a website using HTML CSS and JavaScript that stores data in Firebase

                
04, Jan 21

            
        

            

            
                
How to group header content of a table using HTML5 ?

                
04, Jun 20

            
        

            

            
                
How to group the body content in a table using HTML5 ?

                
24, Jun 20

            
        

                

            

                

                    

            

            
                
Projecting Content into Components with ng-content

                
13, Aug 20

            
        

            

            
                
Adding HTML entities using CSS content

                
12, Apr 19

            
        

            

            
                
Design a table using table tag and its attributes

                
14, Dec 20

            
        

            

            
                
How to Create Time-Table schedule using HTML ?

                
21, Aug 20

            
        

                

            
                                        

                                    

                                    

                                        

                                    

                                

                            

                        
                      

                          

                              
                          

                          

                                                                

                                      
                                          first_page
                                          Previous
                                      
                                      
                                      

                                          JavaScript | Check whether a URL string is absolute or relative
                                      

                                  

                                                                

                                      
                                          Next
                                          last_page
                                      
                                      
                                      

                                          How to get N options from the <select> element using JQuery?
                                      

                                  

                                                        

                      

                    

                          
                        

                            

                                
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