Tree in html

Tree structure in html

by Rohit Bisht

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <ul class="tree">
      <li>
        <input class="Collapsable1" type="checkbox" name="level1" id="Parent_1">
        <label class="Collapsable" for="Parent_1">
          <span></span> Parent_1
        </label>
        <ul>
          <li>
            <input class="Collapsable1" type="checkbox" name="level2" id="Child_1_1">
            <label class="Collapsable" for="Child_1_1">
              <span></span> Child_1_1
            </label>
          </li>
          <li>
            <input class="Collapsable1" type="checkbox" name="level2" id="Child_1_2">
            <label class="Collapsable" for="Child_1_2">
              <span></span> Child_1_2
            </label>
            <ul>
              <li>
                <input class="Collapsable1" type="checkbox" name="level3" id="Grand_Child_1_2_1">
                <label class="Collapsable" for="Grand_Child_1_2_1">
                  <span></span> Grand_Child_1_2_2
                </label>
              </li>
              <li>
                <input class="Collapsable1" type="checkbox" name="level3" id="Grand_Child_1_2_2">
                <label class="Collapsable" for="Grand_Child_1_2_2">
                  <span></span> Grand_Child_1_2_2
                </label>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <input class="Collapsable1" type="checkbox" name="level1" id="Parent_2">
        <label class="Collapsable" for="Parent_2">
          <span></span> Parent_2
        </label>
        <ul>
          <li>
            <input class="Collapsable1" type="checkbox" name="level2" id="Child_2_1">
            <label class="Collapsable"...

CSS

ul.tree,
ul.tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.tree ul {
  margin-left: 0px;
}

ul.tree li {
  margin: 0;
  margin-left: 20px;
  padding: 0 7px;
  line-height: 20px;
  color: #369;
  font-weight: bold;
  border-left: 1px solid rgb(100, 100, 100);
}

ul.tree li:last-child {
  border-left: none;
}

ul.tree li:before {
  position: relative;
  top: -0.3em;
  height: 1em;
  width: 12px;
  color: white;
  border-bottom: 5px solid rgb(100, 100, 100);
  content: "";
  display: inline-block;
  left: -7px;
}

ul.tree li:last-child:before {
  border-left: 1px solid rgb(100, 100, 100);
}

input[type=checkbox] {
  position: absolute;
  margin-top: 4px\9;
  margin-left: -20px;
  visibility: hidden;
}



input[type=checkbox]:checked + label {
  color: #f00;
}

JavaScript

$(document).ready(function() {
  var toggle = function() {
    //var id = $(this).parent().find('input:first')[0].id;
    //$("#"+id).find("input").prop('checked', 'checked');
    //$(this).find("input").prop('checked', true);
    //console.log($(this).parent().find('input:first')[0].id);
    if (!$(this).closest("li").find("ul:first").is(":visible") && $(this).closest("li").is(":visible")) {
      console.log("checked");
      $(this).parent('li:has(>ul)').find("span:first").removeClass("glyphicon glyphicon-plus-sign").addClass("glyphicon glyphicon-minus-sign");
    } else {
      console.log("unchecked");
      $(this).parent('li:has(>ul)').find("span:first").removeClass("glyphicon glyphicon-minus-sign").addClass("glyphicon glyphicon-plus-sign");
    }
    $(this).parent().children().toggle();
    if ($(this).is(":checkbox")){
    	$(`label[for=${this.id}]`).toggle();
    } else {
    	$(this).toggle();
    }
    console.log($('input[name="level1"]:checked'));
    console.log($('input[name="level2"]:checked'));
    console.log($('input[name="level3"]:checked'));
  };
  $(".Collapsable1").click(toggle);
  $(".Collapsable").each(toggle);
  $('.tree li:not(:has(>ul))').find("span:first").addClass("glyphicon glyphicon-bookmark");
});