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>neveropen</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, neveropen 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!
