Bootstrap Snippet BootStrap TreeView using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<ul class="tree">
    <li><a href="#">TECH</a>
        <ul>
            <li>Company Maintenance</li>
            <li>Employees
                <ul>
                    <li>Reports
                        <ul>
                            <li>Report1</li>
                            <li>Report2</li>
                            <li>Report3</li>
                        </ul>
                    </li>
                    <li>Employee Maint.</li>
                </ul>
            </li>
            <li>Human Resources</li>
        </ul>
    </li>
    <li>XRP
        <ul>
            <li>Company Maintenance</li>
            <li>Employees
                <ul>
                    <li>Reports
                        <ul>
                            <li>Report1</li>
                            <li>Report2</li>
                            <li>Report3</li>
                        </ul>
                    </li>
                    <li>Employee Maint.</li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.tree, .tree ul {
    margin:0;
    padding:0;
    list-style:none
}
.tree ul {
    margin-left:1em;
    position:relative
}
.tree ul ul {
    margin-left:.5em
}
.tree ul:before {
    content:"";
    display:block;
    width:0;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    border-left:1px solid
}
.tree li {
    margin:0;
    padding:0 1em;
    line-height:2em;
    color:#369;
    font-weight:700;
    position:relative
}
.tree ul li:before {
    content:"";
    display:block;
    width:10px;
    height:0;
    border-top:1px solid;
    margin-top:-1px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$.fn.extend({
  treed: function() {
    return this.each(function() {
        //initialize each of the top levels
        var tree = $(this);
        tree.addClass("tree");
        tree.find('li').has("ul").each(function () {
            var branch = $(this); //li with children ul
            branch.prepend("<i class='indicator glyphicon glyphicon-plus-sign'></i>");
            branch.addClass('branch');
            branch.on('click', function (e) {
                if (this == e.target) {
                    var icon = $(this).children('i:first');
                    icon.toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
                    $(this).children().children().toggle();
                }
            })
            branch.children().children().toggle();
        });
        //fire event from the dynamically added icon
        $('.branch .indicator').on('click',function(){
            $(this).closest('li').click();
        });
        //fire event to open branch if the li contains an anchor instead of text
        $('.branch a').on('click',function(e){
            $(this).closest('li').click();
            e.preventDefault();
        });
        //fire event to open branch if the li contains a button instead of text
        $('.branch button').on('click',function(e){
            $(this).closest('li').click();
            e.preventDefault();
        });
    }); 
  }
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"BootStrap TreeView"
Bootstrap 3.3.0 Snippet by cojahmetov

Related: See More

Questions / Comments:

"BootStrap TreeView" Bootstrap 3.3.0 Snippet by cojahmetov

Related: See More

Questions / Comments:

"BootStrap TreeView"
Bootstrap 3.3.0 Snippet by cojahmetov