JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<button type="button" id="expandTree" title="CAUTION: This will take some time to expand all branches.">
	Expand Tree</button> 
<INPUT type="button" id="collapseTree" value="Collapse Tree">
  
<font face="calibri" size="3pt" >
<ul id="tree1" class="mytree">  
<li id="theJob" class="my-clickable mytree liParOpen">  
	My Job</li>
<ul id="treeList" class="mytree" name="treeList">
  <li id='0' class='mytree child-click'>Batcher</li>
	<li id='1' class='mytree child-click'>Retriever</li>
	<li id='2' class='my-clickable mytree liParOpen'> TASK 2</li>
  <ul class='mytree'>
      <li id='2a' class='mytree child-click'>Prep1</li>
      <li id='2b' class='mytree child-click'>Prep2</li>
      <li id='2c' class='mytree my-clickable liParOpen'>PREP3</li>
        <ul class='mytree'>
          <li id='2b1' class='mytree child-click'>PREP3a</li>
          <li id='2b2' class='mytree child-click'>PREP3b</li>
        </ul>
      </ul>
			<li id='3' class='mytree child-click' > task 3</li>
			<li id='4' class='my-clickable mytree liParOpen'> TASK 4</li>
      <ul class='mytree'>
      <li id='4a' class='mytree child-click'>Edit1</li>
      <li id='4b' class='mytree child-click'>Edit2</li>
      </ul>
			<li id='5' class='my-clickable mytree liParOpen'> TASK 5</li>
      <ul class='mytree'>
      <li id='5a' class='mytree my-clickable liParOpen'>Del1</li>
        <ul class='mytree'>
        <li id='5a1' class='mytree child-click'>Del1a</li>
        <li id='5a2' class='mytree child-click'>Del1b</li>
        </ul>
      <li id='5b' class='mytree child-click'>Del2</li>
      </ul>
			<li id='6' class='mytree child-click'>DocEjector-3</li>
			
</ul>
</ul>
</font>

CSS

ul.mytree  li.liParClosed { 
	background-color: green;
	fontWeight: normal;
}
ul.mytree  li.liParOpen { 
	background-color: cyan;
	fontWeight: normal;
}
.selected{
	border: 3px solid yellow; 
	background-color: yellow;
	fontWeight: bold;
}
ul.mytree  liParOpen selected{ 
	border: 3px solid red; 
	background-color: yellow;
	fontWeight: bold;
}
ul.mytree  li selected{ 
	border: 3px solid red; 
	background-color: yellow;
	fontWeight: bold;
}
ul.mytree  li { 
	background-color: white;
	fontWeight: normal;
}
ul.mytree  { 
	background-color: white;
	fontWeight: normal;
}

JavaScript

$(document).ready(function(){
	
  // expand button
  $('#expandTree').on('click', function(event) {
			var all = $('.my-clickable');
			var closed = all.filter('.liParClosed');
			    	   
			closed.each(function(){
      	$(this).removeClass('liParClosed').addClass('liParOpen');
				$(this).next('ul').slideToggle();
			});
	}); // end expand button 
  
    // collapse button
  $('#collapseTree').on('click', function(event) {
			var all = $('.my-clickable');
			var open = all.filter('.liParOpen');

			open.each(function(){
	      $(this).removeClass('liParOpen').addClass('liParClosed');
				$(this).next('ul').slideToggle();
			});
	}); // end collapse button 
        
	// this is the top most level parents
	$(".my-clickable").on('click', function(event) {

		var taskId=$(this).closest("li").attr('id');
		var tsk = '#'.concat(taskId);  
    
		if (taskId != "theJob") {
			if ($(tsk).next('ul').length <= 0) {
       	$(tsk).toggleClass("liParOpen liParClosed");
        //$(tsk).children('li').slideToggle();
        $(tsk).next('ul').slideToggle();
			}
			else { 
					//$(event.target).find('ul').toggle();
					$(tsk).toggleClass("liParOpen liParClosed");
          $(tsk).children('li').slideToggle();
          $(tsk).next('ul').slideToggle();
			}
		}  // end if taskId != "theJob"
    else {
    	$(tsk).toggleClass("liParOpen liParClosed");
      $(tsk).slideToggle();
    }
		
		event.cancelBubble=true;
		event.stopPropagation();
	 });
   
   //2nd level parents
	$(".my-clickable").on('click', ".my-clickable", function(event) {
		alert("in my-clickable 2");
		var taskId=$(this).closest("li").attr('id');
		var tsk = '#'.concat(taskId);
		
			//$(event.target).find('ul').slideToggle();
			$(tsk).toggleClass("liParOpen liParClosed");
		
		//event.cancelBubble=true;
		event.stopPropagation();
	 });


// first level child w/no children (parent=job)
	$(".child-click").on('click', function(event) {

		var taskId=$(this).closest("li").attr('id');
		var tsk =...