Scribd Logo
Upload

Welcome to Scribd!

  • HTML Tree

    Uploaded by

    baldo baldovino
    3 views2 pages
    The document describes a tree view interface that represents hierarchical information with expandable and collapsible branches. Clicking on the arrows opens and closes the tree branches to show or hide nested subitems. JavaScript is used to toggle the "active" and "caret-down" classes on click to manipulate the view of the nested lists.

    Original Description:

    codes

    Original Title

    html tree

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document describes a tree view interface that represents hierarchical information with expandable and collapsible branches. Clicking on the arrows opens and closes the tree branches to show or hide nested subitems. JavaScript is used to toggle the "active" and "caret-down" classes on click to manipulate the view of the nested lists.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    3 views2 pages

    HTML Tree

    Uploaded by

    baldo baldovino
    The document describes a tree view interface that represents hierarchical information with expandable and collapsible branches. Clicking on the arrows opens and closes the tree branches to show or hide nested subitems. JavaScript is used to toggle the "active" and "caret-down" classes on click to manipulate the view of the nested lists.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    <!

    DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    ul, #myUL {
    list-style-type: none;
    }

    #myUL {
    margin: 0;
    padding: 0;
    }

    .caret {
    cursor: pointer;
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;
    }

    .caret::before {
    content: "\25B6";
    color: black;
    display: inline-block;
    margin-right: 6px;
    }

    .caret-down::before {
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari */'
    transform: rotate(90deg);
    }

    .nested {
    display: none;
    }

    .active {
    display: block;
    }
    </style>
    </head>
    <body>

    <h2>Tree View</h2>
    <p>A tree view represents a hierarchical view of information, where each item can
    have a number of subitems.</p>
    <p>Click on the arrow(s) to open or close the tree branches.</p>

    <ul id="myUL">
    <li><span class="caret">Root node</span>
    <ul class="nested">
    <li>Parent node</li>
    <li>Siblings</li>
    <li><span class="caret">One-level subtrees</span>
    <ul class="nested">
    <li>Nodes per level</li>
    <li>Depth</li>
    <li><span class="caret">Degree of each one-level subtree</span>
    <ul class="nested">
    <li>list of nodes based on breadth-first</li>
    <li>Preorder</li>
    <li>And</li>
    <li>Postorder</li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>

    <script>
    var toggler = document.getElementsByClassName("caret");
    var i;

    for (i = 0; i < toggler.length; i++) {


    toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("caret-down");
    });
    }
    </script>

    </body>
    </html>

    You might also like