JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<div id='container'></div>
<p>&nbsp;</p>
<div id='folderTree'></div>

CSS

.level1 {
    font-size: 22px;
}
.level2 {
    font-size: 14px;
    padding-left: 25px;
}

JavaScript

var base = "/sites/cof/Project Documents/3. Submittals, RFIs and FWDs/";

var myurls = [];
myurls[0] = "/sites/cof/Project Documents/3. Submittals, RFIs and FWDs/1. Submittals";
myurls[1] = "/sites/cof/Project Documents/3. Submittals, RFIs and FWDs/1. Submittals/1. Site Work";
myurls[2] = "/sites/cof/Project Documents/3. Submittals, RFIs and FWDs/1. Submittals/2. Piling";
myurls[3] = "/sites/cof/Project Documents/3. Submittals, RFIs and FWDs/1. Submittals/3. Liquids Concrete";
myurls[4] = "/sites/cof/Project Documents/3. Submittals, RFIs and FWDs/1. Submittals/4. Liquids Mechanical";
myurls[5] = "/sites/cof/Project Documents/3. Submittals, RFIs and FWDs/1. Submittals/5. Electrical";
myurls[6] = "/sites/cof/Project Documents/3. Submittals, RFIs and FWDs/1. Submittals/6. Building Trades";
myurls[7] = "/sites/cof/Project Documents/3. Submittals, RFIs and FWDs/1. Submittals/7. Demo";
myurls[8] = "/sites/cof/Project Documents/3. Submittals, RFIs and FWDs/1. Submittals/8. Solids";
myurls[9] = "/sites/cof/Project Documents/3. Submittals, RFIs and FWDs/1. Submittals/9. Final paving and Landscaping";
myurls[10] = "/sites/cof/Project Documents/3. Submittals, RFIs and FWDs/2. RFIs";
myurls[11] = "/sites/cof/Project Documents/3. Submittals, RFIs and FWDs/3. FWDs";

for (var i = 0; i < myurls.length; i++) {
    var newurl = myurls[i].replace(base, "");
    buildList($('#container'), newurl, 1);
}

//build the tree here after getting all the folders into array

var rootDiv = $("<div></div>").appendTo("#folderTree");
var elements = [];

//iterate through array 
$.each(myurls, function () {
    // check if this items parent has already been added to the array
    var parent = elements[this.substring(0, this.lastIndexOf("/"))];

    // parent.next will return the next sibling or NULL
    // so if there is a parent use it or attach to the rootDiv
    var list = parent ? parent : rootDiv;
    
    var item = $("<div style='margin-left:50px;'></div>").appendTo(list);

    var anchor...