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

0 0 2 minutes read

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.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Create a Table of Content in Tree 
        View Architecture using HTML, CSS 
        and JavaScript 
    </title> 
</head> 
  
<body> 
    <h1>zambiatek</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> 

CSS

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

Javascript

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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!