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
>
chevron_rightfilter_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:
<
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_rightfilter_none - 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>
chevron_rightfilter_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.
<!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: