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!
