span { cursor:pointer } .tree>ul>li::before,.tree>ul>li::after { border:0 } .tree li:last-child::before { height:30px } .tree li.parent_li>span:hover,.tree li.parent_li>span:hover+ul li span { background:#eee; border:1px solid #94a0b4; color:#000 }

span').attr('title','Collapse this branch'); $('.tree li.parent_li > span').on('click',function (e) { var children = $(this).parent('li.parent_li').find(' > ul > li'); if (children.is(":visible")) { children.hide('fast'); $(this).attr('title','Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign'); } else { children.show('fast'); $(this).attr('title','Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign'); } e.stopPropagation(); }); });