Open In App
Related Articles

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

Improve Article
Save Article
Like Article

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>
        Create a Table of Content in Tree
        View Architecture using HTML, CSS
        and JavaScript
    <b>A Computer Science Portal for Geeks</b>
    <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">
                        <span class="gfg">
                            Analysis of Algorithms
                        <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>
                        <li>Searching Algorithms</li>
                        <li>Sorting Algorithms</li>
                        <li>Graph Algorithms</li>
                        <li>Pattern Searching</li>
                        <li>Geometric Algorithms</li>
                        <li>Randomized Algorithms</li>
                        <li>Greedy Algorithms</li>
                        <li>Dynamic Programming</li>
                        <li>Divide and Conquer</li>
                        <li>Branch and Bound</li>
                        <li>All Algorithms</li>
                    <span class="gfg">
                        Data Structures
                    <ol class="cover" type="a">
                        <li>Linked List</li>
                        <li>Binary Tree</li>
                        <li>Binary Search Tree</li>
                        <li>Advanced Data Structure</li>
                        <li>All Data Structures</li>
                    <span> class="gfg">Languages</span>
                    <ol class="cover" type="a">
                        <li>Go Language</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>
                        <span> class="gfg">GATE</span>
                        <span> class="gfg">ISRO CS</span>
                        <span> class="gfg">UGC NET CS</span>
                        <span> class="gfg">CS Subjects</span>
                        < span class="gfg">Web Technologies</span>


    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;


var toggler = document.getElementsByClassName("gfg");
var i;
for (i = 0; i < toggler.length; i++) {
        function() {

Output: Click here to check the live output

Last Updated : 24 Jan, 2023
Like Article
Save Article
Similar Reads
Related Tutorials