JSFiddle - React, Tailwind, and code Playground

by Parvez Ali

HTML

<div id="dvList1"></div>
<a href="" id="hlGSL">Generate Sorted list</a>

CSS

#dvList1{
	 font-family: "Courier New";
	 border: 1px solid black;
	 width: 200px;
	 height: 500px;
	 overflow: scroll;
}
#dvList2{
	 font-family: "Courier New";
	 border: 1px solid black;
	 width: 400px;
	 height: 500px;
	 overflow: scroll;
}

ul {
    list-style: none;
}

li.hidden ul {
    display: none;
}

li:before {
	
    content: url("http://oi62.tinypic.com/2q2ea8j.jpg");
	padding-right:25px;
    width: 10px;
    display: inline-block;
}

li.hidden:before {
	content:url("http://oi61.tinypic.com/9acxs9.jpg");
	padding-right:25px;
    
}

li.leaf:before {
    content: url("http://oi57.tinypic.com/jsg8oy.jpg");
	padding-right:25px;
}

li {
    cursor: pointer;
}

li.leaf {
    cursor: default;
}

JavaScript

var dataSource = ({
    "Pen": ({
        "Parker": ({
            "P1": ({}),
                "P2": ({})
        }),
            "Cello": ({
            "C2": ({}),
                "C1": ({})
        })
    })
}),
    traverseObject = function (obj) {
        var ul = document.createElement("ul"),
            li;

        for (var prop in obj) {
            li = document.createElement("li");
            li.appendChild(document.createTextNode(prop));
            li.onclick = function(e) {
                var classNames = e.currentTarget.className;
                if (classNames.indexOf("hidden") == -1) {
                    e.currentTarget.className += "hidden";
                } else {
                    e.currentTarget.className = e.currentTarget.className.replace("hidden", "");
                }
                e.stopPropagation();
            }

            if (typeof obj[prop] == "object" && Object.keys(obj[prop]).length) {
                li.appendChild(traverseObject(obj[prop]));
            } else {
                li.className += "leaf";
            }
            ul.appendChild(li);
            console.log(ul);
        }
        return ul;
    };


window.onload = function () {
document.getElementById("dvList1").appendChild(traverseObject(dataSource));
  //  document.getElementById("hlGSL").onclick = function(){document.getElementById("dvList2").appendChild(sortedObject(dataSource));}
}