The tree view elements are a kind of a dropdown menu however well organized. This kind of view gives your website an organized look, to create a tree view architecture of a drop 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 the Tree View Architecture of elements.
Designing Structure: In the previous section, we created the structure of the basic tree view elements. In this section, we will design the structure for the tree view.
<!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 = "tutorial" >
< 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 >
< span 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 >
< span > 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 >
< span > class="gfg">GATE</ span >
</ li >
< li >
< span > class="gfg">ISRO CS</ span >
</ li >
< li >
< span > class="gfg">UGC NET CS</ span >
</ li >
< li >
< span > class="gfg">CS Subjects</ span >
</ li >
< li >
< span class = "gfg" >Web Technologies</ span >
</ li >
</ ol >
</ li >
</ ul >
</ body >
</ html >
|
<style> h 1 {
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> |
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: Click here to check the live output