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

.za {
  border: 1px solid red
}

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

#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 el = $(this).parent().attr('id');
  var tl = $(this).parent().hasClass('active');
  //var pl = $(this).parent().parent().hasClass('active');

  //$(this).parent().children().addClass('za');
  var test = $('#branch0').parent().children().children().children().length;

  var some = [];
  $('#' + el).children().children('.branch').each(function(index, node) {
    //var bell = $(this).attr('id');
    var outbranch = some.push($(this).attr("id"));
    $('#demo').text(outbranch);
    //alert(hasActive);
  });


  expandAndHide('branch0', '#branch1, #branch2');
  expandAndHide('branch1', '#branch0, #branch2');
  expandAndHide('branch2', '#branch0, #branch1');

  expandAndHide('branch0_0', '#branch0_1');
  expandAndHide('branch0_1', '#branch0_0');

  function expandAndHide(id, ids) {
    if (el == id) {
      if (!tl) {
        $(ids).show();
      } else {
        $(ids).hide();
      }
    }
  }




  $('.branch_parent').each(function(index, value) {

    // alert($(this).attr('id')); 
    //alert(index);
    //alert(value);
  });




});

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