"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'});

Similar snippets: See More


Comments:

Bob 2015-02-06 17:42:29
    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.
Guest 2015-02-20 18:10:13
    "View framesource" of preview iframe! :)
Douglas Roos 2015-02-19 17:31:19
    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.
SeanWessell 2015-02-27 14:49:31
    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.
_j 2015-03-14 00:32:29
    guy, you have saved my life :p thank you for this code =D
JESUS MANUEL QQUEHUE C. 2015-05-22 02:03:02
    esto estaba buscando para mi trabajo ufff hasta que al fin lo encontre ... :)
SeanWessell 2015-05-22 15:17:35
    contento de que ayudó!
Абылайхан Байдуллаев 2015-06-15 10:03:41
    Please help me! I can't use it. It doesn't work.
SeanWessell 2015-06-16 18:10:17
    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;
Yassine Teimi Özil 2015-07-31 15:51:22
    I used this but it doesnn't work, how to do a workaround ?
SeanWessell 2015-07-31 16:26:07
    Create a fiddle with your code on jsfiddle.net and post the link and I'll look at it.
me 2016-04-28 10:33:07
    Sorry. You have an error in your DNA, that`s why just forget it
Zahid Ullah 2015-07-28 11:36:29
    how can we display the tree fully opened .
SeanWessell 2015-07-28 20:53:05
    http://jsfiddle.net/SeanWes...
Zahid Ullah 2015-08-03 11:44:17
    thanks :)
Amaan Qureshi 2015-09-01 07:29:49
    i am not able to see the icons + and -
Zahid Ullah 2015-09-03 13:00:20
    its due to font-awesome missing ..... add it
Juan Camacho 2015-09-04 10:59:01
    And if I want to only expand an specific one?
Jon Bernhardt 2016-07-12 15:14:04
    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:
Alaaeddin Sammar 2015-08-25 07:26:10
    How can we use it for RTL languages? And How to get it not Fully opened?
sara 2015-08-27 06:00:57
    I`m wondering how to set one of these titles extracted by default
Renato Dehnhardt 2015-09-10 12:00:34
    It would be perfect if there was an option with checkbox!
Ezequiel 2015-11-10 15:54:13
    How do I open all levels of the treeview per event?
Aaron Bracken 2016-03-07 05:00:23
    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');
Abu Sadat Mohammed Yasin 2017-05-08 06:24:41
    Thanks, it works perfectly as I wanted.
Leon 2016-04-06 00:59:42
    ie8?
Armin Linder 2016-05-08 12:45:13
    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.
Admin S. Kümmel 2016-07-28 21:18:06
    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)?
Jon Bernhardt 2016-07-29 01:47:11
    a) is answered below see my other comment from a couple of weeks ago.
asd 2016-12-08 04:45:09
    can we create dynamic tree using boostrap
procreagency Sarl 2016-12-21 10:16:25
    hello,
is possible to set in configure open first node?
ravi 2017-04-19 06:29:36
    how to manage this in php according to database
Cristiana Pereira 2017-06-28 16:35:33
    Just what I needed. Thank you.

Commenting will be back soon.