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

• Difficulty Level : Basic
• 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:

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

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; ` `    ``} ` ` `

• JavaScript code:

 ` `

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.

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

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :