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><label class="Collapsable" for="chk1"><input type="checkbox" name="chk1" id="chk1" >First</label>
                <ul>
                    <li><span class="Collapsable">item 1</span></li>
                    <li><span class="Collapsable">item 2</span>
                        <ul>
                            <li><span class="Collapsable">item 1</span></li>
                            <li><span class="Collapsable">item 2</span></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><label class="Collapsable" for="chk2"><input type="checkbox" name="chk2" id="two">item 1</label>
                <ul>
                    <li><span class="Collapsable">item 1</span></li>
                    <li><span class="Collapsable">item 2</span>
                        <ul>
                            <li><span class="Collapsable">item 1</span></li>
                            <li><span class="Collapsable">item 2</span></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

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: 1px 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);
}

JavaScript

$(document).ready(function() {
    var toggle = function() {
        $(this).parent().children().toggle();
        $(this).toggle();
    };
    $(".Collapsable").click(toggle);
    $(".Collapsable").each(toggle);
});