JSFiddle - React, Tailwind, and code Playground

by xelawho

HTML

<title>treeView</title>


  <body>
    <div id="treeView">
    </div>
</body>

CSS

#treeView li {
      list-style: none;
    }
    
    #treeView ul {
      padding-left: 1em;
    }
    
    #treeView b {
      padding-right: 1em;
    }

    .Min {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/plus_zps8o4adn0e.gif") no-repeat;
      padding-left: 15px;
    }
	
	.Blue {
	text-decoration: underline;
      color: Blue;
    }
	.Purple {
	text-decoration: underline;
      color: Purple;
    }
	.Red {
      color: Red;
    }
	
    .Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/minus_zpsk0jlvbaa.gif") no-repeat;
      padding-left: 15px;
    }
    
    li {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/bullet_zpsblghj3ip.gif") no-repeat;
      padding-left: 15px;
    }
    
    .Table {
	 pointer-events: none;
	color: black;
	font-color: pink;
	background-color : yellow;
	border: 1px solid black;
    border-collapse: collapse;
    width: 600px;
    height: 600px;    
    padding: 50px;
    box-sizing: border-box;
	position: absolute;
    right: 100px;
    top: 50px;
	cursor: pointer;
	overflow: scroll;
	}
	
	.MainStation.Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/station_zpswxz6gpqe.jpg") no-repeat;
      background-size: 15px 15px;
      cursor: pointer;
	  padding-left: 15px;
    }
	.Substation.Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/sub_zpsspl8dckt.jpg") no-repeat;
      background-size: 15px 15px;
      cursor: pointer;
	  padding-left: 15px;
    }
	.ControlExpandable.Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/control_zpsrfvdzyzp.jpg") no-repeat;
      background-size: 15px 15px;
      cursor: pointer;
	  padding-left: 15px;
    }
	.PushButtonExpandable.Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/pusbutton_zpsspjfsfsp.jpg") no-repeat;
      background-size: 15px 15px;
      cursor: pointer;
	 ...

JavaScript

$(document).ready(function() { 
         $.ajax({ 
             url: "https://api.myjson.com/bins/2kng8", 
             dataType: 'json', 
             success: function(tree) { 
                 console.log(tree) 
                 traverse($('#treeView'), tree) 

                 $('#treeView li:has(li)').each(function() { 
                     if ($(this).hasClass("Control")) { 
                         $(this).click(function(e) { 
                             $(this).children("ul").toggle(); 
                             e.stopPropagation(); 
                         }) 
                     } else { 
                         $(this).addClass("Max").click(function(e) { 
                             $(this).toggleClass("Max Min"); 
                             $(this).children("ul").toggle(); 
                             e.stopPropagation(); 
                         }) 
                     } 
                 }); 
                 $("[href]").addClass("Blue").click(function(e) { 
                     $(this).toggleClass("Purple"); 
                     e.stopPropagation(); 
                     window.location.href = $(this).attr("href") 
                 }) 
                 $('#treeView li').click(function(g) { 
                     var mytree2 = $(this); 
                     mytree2.children('li').toggle(); 
                     g.stopPropagation(); 
                 }) 
             } 
         }) 
     }); 



     function traverse(node, o) { 
         var ul = $("<ul>").appendTo(node) 
         for (var i in o) { 
             if (i == "__text" || i == "_href" || i == "_attr" || i == "_type") 
                 continue; 
             if (o[i] !== null && typeof(o[i]) == "object") { 
                 if (o[i].__text) { 
                     if (o[i]._type) { 
                         if (o[i]._type == "ch3") { 
                             var node = $('<li class="Control">').appendTo(ul) 
                         } 
                     } else { 

  ...