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 type="checkbox" name="chkname1" id="chk1">
                <label class="Collapsable" for="chk1">
                  <span></span>
                    Generel Ledger Grand Parent-1
                </label>
                <ul>
                    <li>
                        <input type="checkbox" name="chkname1_1" id="chk1_1">
                        <label class="Collapsable" for="chk1_1">
                        <span></span>
                        Generel Ledger Child-1-1
                        </label>
                    </li>
                    <li>
                        <input type="checkbox" name="chkname1_2" id="chk1_2">
                        <label class="Collapsable" for="chk1_2">
                        <span></span>
                        Generel Ledger Child-1-2
                        </label>
                        <ul>
                            <li>
                                <input type="checkbox" name="chkname1_1_1" id="chk1_1_1">
                                <label class="Collapsable" for="chk1_1_1">
                                <span></span>
                                Generel Ledger Grand Child-1-2-1
                                </label>
                            </li>
                            <li>
                                <input type="checkbox" name="chkname1_1_2" id="chk1_1_2">
                                <label class="Collapsable" for="chk1_1_2">
                                <span></span>
                                Generel Ledger Grand Child-1-2-2
                                </label>
            ...

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] + label {
    display: initial;
} 
input[type=checkbox]:checked + label {
  color: #f00;
}

JavaScript

$(document).ready(function() {
    var toggle = function() {
    console.log($(this).parent().find('input:first')[0].id);
        if (!$(this).closest("li").find("ul:first").is(":visible") && $(this).closest("li").is(":visible")&&($(this).parent().find("input").not(':checked'))) {
            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();
        $(this).toggle();
    };
    $(".Collapsable").click(toggle);
    $(".Collapsable").each(toggle);
    $('.tree li:not(:has(>ul))').find("span:first").addClass("glyphicon glyphicon-bookmark");
});