JSFiddle - React, Tailwind, and code Playground

by zidski

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.4/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<div id="tree" ng-controller="TreeController">
  <div class="branch branch_parent" id="branch0">
    <span class="collapsable leaf">Financial</span>
    <div class="first">
      <div class="branch" id="branch0_0">
        <span class="collapsable leaf">Budget</span>
        <div class="second">
          <div class="empty-branch">
            <label>Education Services
              <input type="checkbox" />
            </label>
          </div>
          <div class="empty-branch">
            <label>Highways and Transport Services
              <input type="checkbox" />
            </label>
          </div>
          <div class="empty-branch">
            <label>Child Social Care
              <input type="checkbox" />
            </label>
          </div>
          <div class="empty-branch">
            <label>Adult Social Care
              <input type="checkbox" />
            </label>
          </div>
          <div class="empty-branch">
            <label>Social Care
              <input type="checkbox" />
            </label>
          </div>
          <div class="empty-branch">
            <label>Public Health services
              <input type="checkbox" />
            </label>
          </div>
          <div class="empty-branch">
            <label>Housing Services
              <input type="checkbox" />
            </label>
          </div>
          <div class="empty-branch">
            <label>Cultural and Related Services
              <input type="checkbox" />
            </label>
          </div>
          <div class="empty-branch">
            <label>Environment and Regulatory Services
              <input type="checkbox" />
            </label>
          </div>
          <div class="empty-branch">
            <label>Corporate and Democratic Core
             ...

CSS

.hideBranch {
  display:none
}

@charset "UTF-8";
#tree {
  background: #efefef;
  padding: 8px;
  width: auto;
}

#tree .branch span {
  display:block;
}
#tree .branch label {
  font-size: 14px;
  display: block;
  margin: 2px 0px;
}

#tree .branch input[type=checkbox] {
  float: right;
}

#tree .branch .leaf:before {
  font-family: FontAwesome;
  display: inline-block;
  font-weight: 400;
  margin-right: 4px;
  font-style: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  content: "\f196";
}

#tree .branch.active .leaf:before,
#tree .branch .first .branch.active .leaf:before,
#tree .branch .first .branch.active .second .branch.active .leaf:before {
  content: "\f147";
}

#tree .branch .first .branch .leaf:before,
#tree .branch .first .branch .second .branch .leaf:before {
  content: "\f196";
}

#tree .branch .first {
  background: #eee;
}

#tree .branch .second {
  background: #ddd;
}

#tree .branch .third {
  background: #ccc;
}

#tree .empty-branch:before {
  content: '•';
  margin-right: 0px;
  display: block;
  float: left;
  width: 12px;
}

#tree div {
  margin: 0px;
  padding: 0px;
  cursor: pointer;
}

#tree .first {
  text-indent: 20px;
}

#tree .first .branch {
  text-indent: 10px;
}

#tree .second {
  text-indent: 35px;
}

#tree .second .branch {
  text-indent: 16px;
}

#tree .third {
  text-indent: 46px;
}

JavaScript

$(".collapsable").click(function() {
  $(this).parent().toggleClass('active');
  $(this).parent().children().toggle();
  $(this).toggle();

  var element = $(this).parent().attr('id');
  var getTreeParentsID = $(this).parent().parent().prop("id");
  var getBranchParentID = $(this).parent().parent().parent().prop("id");
 
if(element == 'branch0' || element == 'branch1' || element == 'branch2'){
  $('#' + getTreeParentsID).children('.branch').each(function() {
   var treeIDs = $(this).attr('id');
  if(element == treeIDs){
      $(this).removeClass('hideBranch');
    }else {
      $(this).toggleClass('hideBranch');
    }
  });
} else {
  $('#' + getBranchParentID).children().children('.branch').each(function() {
    var branchIDs = $(this).attr('id');
    if(element == branchIDs){
      $(this).removeClass('hideBranch');
    }else {
      $(this).toggleClass('hideBranch');
    }
  });
}
});

$(".collapsable").each(function() {
  $(this).parent().children().toggle();
  $(this).toggle();
});