"BootStrap TreeView"
Bootstrap 3.3.0 Snippet by SeanWessell

<div class="container" style="margin-top:30px;"> <div class="row"> <div class="col-md-4"> <ul id="tree1"> <p class="well" style="height:135px;"><strong>Initialization no parameters</strong> <br /> <code>$('#tree1').treed();</code> </p> <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> </ul> </li> <li>Human Resources</li> </ul> </li> </ul> </div> <div class="col-md-4"> <p class="well" style="height:135px;"><strong>Initialization optional parameters</strong> <br /> <code>$('#tree2').treed({openedClass : 'glyphicon-folder-open', closedClass : 'glyphicon-folder-close'});</code> </p> <ul id="tree2"> <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> </ul> </li> <li>Human Resources</li> </ul> </li> </ul> </div> <div class="col-md-4"> <p class="well" style="height:135px;"><strong>Initialization optional parameters</strong> <br /> <code>$('#tree3').treed({openedClass:'glyphicon-chevron-right', closedClass:'glyphicon-chevron-down'});</code> </p> <ul id="tree3"> <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> </ul> </li> <li>Human Resources</li> </ul> </li> </ul> </div> </div> </div>
.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; position:absolute; top:1em; left:0 } .tree ul li:last-child:before { background:#fff; height:auto; top:1em; bottom:0 } .indicator { margin-right:5px; } .tree li a { text-decoration: none; color:#369; } .tree li button, .tree li button:active, .tree li button:focus { text-decoration: none; color:#369; border:none; background:transparent; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; outline: 0; }
$.fn.extend({ treed: function (o) { var openedClass = 'glyphicon-minus-sign'; var closedClass = 'glyphicon-plus-sign'; if (typeof o != 'undefined'){ if (typeof o.openedClass != 'undefined'){ openedClass = o.openedClass; } if (typeof o.closedClass != 'undefined'){ closedClass = o.closedClass; } }; //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 " + closedClass + "'></i>"); branch.addClass('branch'); branch.on('click', function (e) { if (this == e.target) { var icon = $(this).children('i:first'); icon.toggleClass(openedClass + " " + closedClass); $(this).children().children().toggle(); } }) branch.children().children().toggle(); }); //fire event from the dynamically added icon tree.find('.branch .indicator').each(function(){ $(this).on('click', function () { $(this).closest('li').click(); }); }); //fire event to open branch if the li contains an anchor instead of text tree.find('.branch>a').each(function () { $(this).on('click', function (e) { $(this).closest('li').click(); e.preventDefault(); }); }); //fire event to open branch if the li contains a button instead of text tree.find('.branch>button').each(function () { $(this).on('click', function (e) { $(this).closest('li').click(); e.preventDefault(); }); }); } }); //Initialization of treeviews $('#tree1').treed(); $('#tree2').treed({openedClass:'glyphicon-folder-open', closedClass:'glyphicon-folder-close'}); $('#tree3').treed({openedClass:'glyphicon-chevron-right', closedClass:'glyphicon-chevron-down'});

Questions / Comments:

Just what I needed. Thank you.

Cristiana Pereira (0) - 6 months ago - Reply 0


how to manage this in php according to database

ravi (0) - 9 months ago - Reply 0


hello,
is possible to set in configure open first node?

procreagency Sarl (0) - 1 year ago - Reply 0


can we create dynamic tree using boostrap

asd (0) - 1 year ago - Reply 0


Thanks for this snippet! But i have two questions:
a) is it possible to expand all nodes on creation?
b) is it possible to save the status of the collapsed/expanded nodes when e.g. dynamically add or remove nodes with MVC CRUD (and returning back to the treeview)?

Admin S. Kümmel (0) - 1 year ago - Reply 0


a) is answered below see my other comment from a couple of weeks ago.

Jon Bernhardt (0) - 1 year ago - Reply 0


Sorry if I am jumping in here, but I could not get this to work as
well. I tried to create a jsfiddle, like you said, and also did my best
to configure the jsfiddle for bootstrap, but had no success.

https://jsfiddle.net/Nimral...

Problem symptom description is quite simple: code produces no functionality at
all, probably/likely it isn't even executed, couldn't figure out how to
stitch all those loose parts together properly in jsfiddle.

Would you - or anyone else - please have a look? Thx, Armin

Armin Linder (0) - 1 year ago - Reply 0


ie8?

Leon (0) - 1 year ago - Reply 0


Thanks, wonderful code, I saw a couple of questions on how to auto open a specific tree branch. This is what i came up with, hope it helps:
$(function () {
$( "#tree2 .selected" ).parents('#tree2 .branch').map(function() {
console.log($(this));
var icon = $(this).children('i:first');

icon.toggleClass('glyphicon-folder-open glyphicon-folder-close');

$(this).children().children().toggle();
})

});

Aaron Bracken (0) - 1 year ago - Reply 0


Thanks, it works perfectly as I wanted.

Abu Sadat Mohammed Yasin (0) - 8 months ago - Reply 0


How do I open all levels of the treeview per event?

Ezequiel (0) - 2 years ago - Reply 0


It would be perfect if there was an option with checkbox!

Renato Dehnhardt (0) - 2 years ago - Reply 0


I`m wondering how to set one of these titles extracted by default

sara (0) - 2 years ago - Reply 0


How can we use it for RTL languages? And How to get it not Fully opened?

Alaaeddin Sammar (0) - 2 years ago - Reply 0


how can we display the tree fully opened .

Zahid Ullah (0) - 2 years ago - Reply 0


http://jsfiddle.net/SeanWes...

After you have called the .treed function use this

$('#tree1 .branch').each(function(){

var icon = $(this).children('i:first');

icon.toggleClass('glyphicon-minus-sign glyphicon-plus-sign');

$(this).children().children().toggle();

});

SeanWessell (0) - 2 years ago - Reply 0


Sean's answer above toggles the open/close state of each folder. It doesn't open the entire tree unless it is currently completely closed. To open every node, regardless of its current state, use this:

$('#tree .branch').each(function(){
var icon = $(this).children('i:first');
icon.addClass('glyphicon-minus-sign').removeClass('glyphicon-plus-sign');
$(this).children().children().show();
});

Jon Bernhardt (0) - 1 year ago - Reply 0


And if I want to only expand an specific one?

Juan Camacho (0) - 2 years ago - Reply 0


thanks :)

Zahid Ullah (0) - 2 years ago - Reply 0


i am not able to see the icons + and -

Amaan Qureshi (0) - 2 years ago - Reply 0


its due to font-awesome missing ..... add it

Zahid Ullah (0) - 2 years ago - Reply 0


Please help me! I can't use it. It doesn't work.

it's my code below:

<html>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn...">
<script src="https://ajax.googleapis.com..."></script>
<script src="https://maxcdn.bootstrapcdn..."></script>

<script type="text/javascript">
$.fn.extend({
treed: function (o) {

var openedClass = 'glyphicon-minus-sign';
var closedClass = 'glyphicon-plus-sign';

if (typeof o != 'undefined'){
if (typeof o.openedClass != 'undefined'){
openedClass = o.openedClass;
}
if (typeof o.closedClass != 'undefined'){
closedClass = o.closedClass;
}
};

//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("");
branch.addClass('branch');
branch.on('click', function (e) {
if (this == e.target) {
var icon = $(this).children('i:first');
icon.toggleClass(openedClass + " " + closedClass);
$(this).children().children().toggle();
}
})
branch.children().children().toggle();
});
//fire event from the dynamically added icon
tree.find('.branch .indicator').each(function(){
$(this).on('click', function () {
$(this).closest('li').click();
});
});
//fire event to open branch if the li contains an anchor instead of text
tree.find('.branch>a').each(function () {
$(this).on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
//fire event to open branch if the li contains a button instead of text
tree.find('.branch>button').each(function () {
$(this).on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
}
});

//Initialization of treeviews

$('#tree1').treed();

$('#tree2').treed({openedClass:'glyphicon-folder-open', closedClass:'glyphicon-folder-close'});

$('#tree3').treed({openedClass:'glyphicon-chevron-right', closedClass:'glyphicon-chevron-down'});

</script>

<style type="text/css">
.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;
position:absolute;
top:1em;
left:0
}
.tree ul li:last-child:before {
background:#fff;
height:auto;
top:1em;
bottom:0
}
.indicator {
margin-right:5px;
}
.tree li a {
text-decoration: none;
color:#369;
}
.tree li button, .tree li button:active, .tree li button:focus {
text-decoration: none;
color:#369;
border:none;
background:transparent;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
outline: 0;
}

</style>

<div class="container" style="margin-top:30px;">
<div class="row">
<div class="col-md-4">
<ul id="tree1">

Initialization no parameters


$('#tree1').treed();


<li>TECH

<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>
</ul>
</li>
<li>Human Resources</li>
</ul>
</li>
</ul>
</div>
<div class="col-md-4">

Initialization optional parameters


$('#tree2').treed({openedClass : 'glyphicon-folder-open', closedClass : 'glyphicon-folder-close'});


<ul id="tree2">
<li>TECH

<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>
</ul>
</li>
<li>Human Resources</li>
</ul>
</li>
</ul>
</div>
<div class="col-md-4">

Initialization optional parameters


$('#tree3').treed({openedClass:'glyphicon-chevron-right', closedClass:'glyphicon-chevron-down'});


<ul id="tree3">
<li>TECH

<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>
</ul>
</li>
<li>Human Resources</li>
</ul>
</li>
</ul>
</div>
</div>
</div>

</body>

</html>

Абылайхан Байдуллаев (0) - 2 years ago - Reply 0


Sorry. You have an error in your DNA, that`s why just forget it

me (0) - 1 year ago - Reply 0


You're script tag is before the the DOM has created the UL's. Either move the script to the bottom or surround the treed functions with $(document).ready...See Below Code;

$(document).ready(function(){

$('#tree1').treed();

$('#tree2').treed({openedClass:'glyphicon-folder-open', closedClass:'glyphicon-folder-close'});

$('#tree3').treed({openedClass:'glyphicon-chevron-right', closedClass:'glyphicon-chevron-down'});

});

SeanWessell (0) - 2 years ago - Reply 0


I used this but it doesnn't work, how to do a workaround ?

Yassine Teimi Özil (0) - 2 years ago - Reply 0


Create a fiddle with your code on jsfiddle.net and post the link and I'll look at it.

SeanWessell (0) - 2 years ago - Reply 0


esto estaba buscando para mi trabajo ufff hasta que al fin lo encontre ... :)

JESUS MANUEL QQUEHUE C. (0) - 2 years ago - Reply 0


contento de que ayudó!

SeanWessell (0) - 2 years ago - Reply 0


guy, you have saved my life :p thank you for this code =D

_j (0) - 2 years ago - Reply 0


Awesome, i was looking for something like this. How can i use this with multiple <ul class="tree"> ? I need to put several inside divs col-md-3 in order to show a lot of categories. It works always with the last ul, but the others has no action.

Douglas Roos (0) - 2 years ago - Reply 0


There was an error in my jQuery so there were events being attached multiple times. Which is why you would have issues with any even occurances. jQuery has been updated and should work with multiple occurances.

SeanWessell (0) - 2 years ago - Reply 0


Fairly new to jquery here; it would be great if you could update the html snippet to show the required javascript and how to invoke the custom js.

Bob (0) - 2 years ago - Reply 0


"View framesource" of preview iframe! :)

Guest (0) - 2 years ago - Reply 0


Related: See More