JSFiddle - React, Tailwind, and code Playground

by NerfAnarchist

HTML

<div id="tree"></div>

CSS

#tree {
    position:relative;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: helvetica;
    overflow: auto;
    overflow-x: hidden;
    line-height: 20px;
}
.tree_line {
    position:relative;
    width:auto;
}
.tree_line_title {
    display:inline-block;
}
.tree_line_opener {
    display: inline-block;
    position: relative;
    font-size: 9px;
    width: 11px;
    top: -3px;
}

JavaScript

// javascript/jquery tree view

var indent_size = 16;

var build_level = function (level, content) {
    var html = '', i, len;
    
    for (i = 0, len = content.length; i < len; i = i + 1) {
        if (typeof content[i].sub_folders != 'undefined') {
            html += '<div class="tree_line" style="left:' + (level === 0 ? 0: indent_size) + 'px;" data-level="' + (level + 1) + '" data-tree_marker="' + i + '" data-open="false"><div class="tree_line_title"><div class="tree_line_opener">&#9658;</div>' + content[i].name + '</div></div>';
        } else {
            html += '<div class="tree_line" style="left:' + indent_size + 'px;" data-level="' + (level + 1) + '" data-tree_marker="' + i + '" data-open="false"><div class="tree_line_title"><div class="tree_line_opener">&#8594;</div>' + content[i].name + '</div></div>';
        }
    }
    
    return html;
};

var tree = [
            {"name": "Home", "sub_folders": [
                    {"name": "Music", "sub_folders": []},
                    {"name": "Documents", "sub_folders": []},
                    {"name": "Programs", "sub_folders": [
                        {"name": "Alert", "onclick": function () {alert('a');}},
                        {"name": "Games", "sub_folders": [
                            {"name": "Minecraft"},
                            {"name": "Xonotic"},
                            {"name": "Nexius"},
                            {"name": "Urban Terror"}
                        ]},
                        {"name": "Test"}
                    ]},
                    {"name": "Photos", "sub_folders": [
                        {"name": "Mateba", "sub_folders": [
                            {"name": "3 inch barrel.png"},
                            {"name": "6 inch barrel.png"},
                            {"name": "8 inch barrel.png"},
                            {"name": "Overview"}
                        ], "onclick": function () {alert('You Didn\'t!');}},
                        {"name":...