JSFiddle - React, Tailwind, and code Playground

Tree_01

by Dave

HTML

<ul id="list" oncontextmenu="return false;">
    <li>Category1
        <ul>
            <li>Subcategory1
                <ul>
                    <li>Serie1
                        <ul>
                            <li>Item1</li>
                        </ul>
                    </li>
                    <li>Serie2
                        <ul>
                            <li>Item2</li>
                        </ul>
                    </li>
                    <li>Serie3
                        <ul>
                            <li>Item3</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>Subcategory2
                <ul>
                    <li>Serie1
                        <ul>
                            <li>Item1</li>
                        </ul>
                    </li>
                    <li>Serie2
                        <ul>
                            <li>Item2</li>
                        </ul>
                    </li>
                    <li>Serie3
                        <ul>
                            <li>Item3</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>Subcategory3
                <ul>
                    <li>Serie1
                        <ul>
                            <li>Item1</li>
                        </ul>
                    </li>
                    <li>Serie2
                        <ul>
                            <li>Item2</li>
                        </ul>
                    </li>
                    <li>Serie3
                        <ul>
                            <li>Item3</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Category2
        <ul>
            <li>Subcategory1
                <ul>
                    <li>Serie1
                        <ul>
                            <li>Item1</li>
            ...

CSS

/* tweaked styling a little bit to work together with the Helpers library*/
#list {
    /*font: 1.4em/1.5'open sans';*/
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    position: absolute;
    left: 0;
    right: 0;
}
#list, #list ul, #list li {
    padding: 0;
    margin: 0;
}
#list li {
    list-style: none;
    /*line-height: 54px;*/
    text-indent: 16px;
    border-top: 1px solid #ddd;
    position: relative;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#list li:hover {
    color: #e44;
}
#list li.expand {
    /*color: #fff;*/
}
#list li.expand li {
    color: #444;
}
#list li.expand li:hover {
    color: #e44;
}
#list li li {
    text-indent: 32px;
}
#list li span {
    background: #eee;
}
#list li li li {
    text-indent: 48px;
}
#list li li li li {
    text-indent: 64px;
}
#list li.expand {
    /*background: #777;*/
    border-color: #888;
}
#list li.expand ul {
    background: #fff;
}
#list li.expand span {
    background: #b22;
}
#list li.collapse:before {
    content:'+';
}
#list li.expand:before {
    content:'-';
}
#list li.collapse ul {
    display: none;
}
#list li ul {
    display: none;
    -webkit-transition: max-height 0.2s ease;
    -o-transition: max-height 0.2s ease;
    transition: max-height 0.2s ease;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
}
#list li.expand ul {
    display: block;
    max-height: 100%;
}
#list li.collapse ul {
    display: none;
}

li {cursor: pointer;}

JavaScript

(function(d, w, undefined) {
    var list = d.querySelector('#list');
    var items = list.querySelectorAll('ul');
    
    for (var i = 0; len = items.length, i < len; i++) {
        items[i].parentNode.className = 'collapse';
    }
///////////////////////////////////////
function handleMouseDown (e) {
     if (e.button == 2){
     //alert('e.target.innerText')
     e.target.outerHTML+='<li>I am the new element</li>'
     var zz='a'
     return zz
     }
     //e.stopPropagation();
}
///////////////////////////////////
    addEvent( list, 'mousedown'||'click', function (e) {
              e = e || window.event;
                 var from = e.target || e.srcElement;
                  e.target.onmouseup = handleMouseDown;
                  //alert(zz)
                  //if (zz=='a'){
                  //return;
                  //}/////////////////////////////////
                if (!/^li$/i.test(from.nodeName) || !from.querySelectorAll('li').length) {
                 //alert(e.target.innerText);
                     return true;
                 }
                 var expand = /collapse/i.test(from.className || '');
                  from.setAttribute('class', expand ? 'expand' : 'collapse');
                 
              });
              
    function addEvent(element, myEvent, fnc) {
    //element=document.body
        return ((element.attachEvent)
                 ? element.attachEvent('on' + myEvent, fnc) 
                 : element.addEventListener(myEvent, fnc, false));  
                
    }

}(document, window))