Bootstrap Snippet "BootTree" TreeView for Bootstrap 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 ---------->
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">Treeview List</div>
        <div class="panel-body">
            <!-- TREEVIEW CODE -->
            <ul class="treeview">
                <li><a href="#">Tree</a>
                    <ul>
                        <li><a href="#">Branch</a></li>
                        <li><a href="#">Branch</a>
                            <ul>
                                <li><a href="#">Stick</a></li>
                                <li><a href="#">Stick</a></li>
                                <li><a href="#">Stick</a>
                                    <ul>
                                        <li><a href="#">Twig</a></li>
                                        <li><a href="#">Twig</a></li>
                                        <li><a href="#">Twig</a></li>
                                        <li><a href="#">Twig</a>
                                            <ul>
                                                <li><a href="#">Leaf</a></li>
                                                <li><a href="#">Leaf</a></li>
                                                <li><a href="#">Leaf</a></li>
                                                <li><a href="#">Leaf</a></li>
                                                <li><a href="#">Leaf</a></li>
                                                <li><a href="#">Leaf</a></li>
                                                <li><a href="#">Leaf</a></li>
                                                <li><a href="#">Leaf</a></li>
                                                <li><a href="#">Leaf</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="#">Twig</a></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
div.panel:first-child {
    margin-top:20px;
}
div.treeview {
    min-width: 100px;
    min-height: 100px;
    
    max-height: 256px;
    overflow:auto;
    
    padding: 4px;
    
    margin-bottom: 20px;
    
    color: #369;
    
    border: solid 1px;
    border-radius: 4px;
}
div.treeview ul:first-child:before {
    display: none;
}
.treeview, .treeview ul {
    margin:0;
    padding:0;
    list-style:none;
    
    color: #369;
}
.treeview ul {
    margin-left:1em;
    position:relative
}
.treeview ul ul {
    margin-left:.5em
}
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
/**
 *  BootTree Treeview plugin for Bootstrap.
 *
 *  Based on BootSnipp TreeView Example by Sean Wessell
 *  URL:    http://bootsnipp.com/snippets/featured/bootstrap-30-treeview
 *
 *  Revised code by Leo "LeoV117" Myers
 *
 */
$.fn.extend({
    treeview:   function() {
        return this.each(function() {
            // Initialize the top levels;
            var tree = $(this);
            
            tree.addClass('treeview-tree');
            tree.find('li').each(function() {
                var stick = $(this);
            });
            tree.find('li').has("ul").each(function () {
                var branch = $(this); //li with children ul
                
                branch.prepend("<i class='tree-indicator glyphicon glyphicon-chevron-right'></i>");
                branch.addClass('tree-branch');
                branch.on('click', function (e) {
                    if (this == e.target) {
                        var icon = $(this).children('i:first');
                        
                        icon.toggleClass("glyphicon-chevron-down glyphicon-chevron-right");
                        $(this).children().children().toggle();
                    }
                })
                branch.children().children().toggle();
                
                /**
                 *  The following snippet of code enables the treeview to
                 *  function when a button, indicator or anchor is clicked.
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

""BootTree" TreeView for Bootstrap"
Bootstrap 3.3.0 Snippet by shahariaazam

Related: See More

Questions / Comments:

""BootTree" TreeView for Bootstrap" Bootstrap 3.3.0 Snippet by shahariaazam

Related: See More

Questions / Comments:

""BootTree" TreeView for Bootstrap"
Bootstrap 3.3.0 Snippet by shahariaazam