Trees in Twitter Bootstrap

Question

I have been trying to work on creating a tree (like a directory tree) that uses as much CSS and as little JS as possible (only for states, etc), and I want to know if there are some good existing tree plugins for bootstrap or jquery-ui bootstrap.

For reference or for people confused about this question, I am looking for something like dynatree for bootstrap.

score 181 · Accepted Answer · edited May 23 '17 at 12:02

181

Building on Vitaliy's CSS and Mehmet's jQuery, I changed the a tags to span tags and incorporated some Glyphicons and badging into my take on a Bootstrap tree widget.

Example: my take on a Bootstrap tree widget

For extra credit, I've created a Github icon GitHub project to host the jQuery and LESS code that goes into adding this tree component to Bootstrap. Please see the project documentation at http://jhfrench.github.io/bootstrap-tree/docs/example.html.

Alternately, here is the LESS source to generate that CSS (the JS can be picked up from the jsFiddle):

@import "../../../external/bootstrap/less/bootstrap.less"; /* substitute your path to the bootstrap.less file */
@import "../../../external/bootstrap/less/responsive.less"; /* optional; substitute your path to the responsive.less file */

/* collapsable tree */
.tree {
    .border-radius(@baseBorderRadius);
    .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
    background-color: lighten(@grayLighter, 5%);
    border: 1px solid @grayLight;
    margin-bottom: 10px;
    max-height: 300px;
    min-height: 20px;
    overflow-y: auto;
    padding: 19px;
    a {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 90%;
    }
    li {
        list-style-type: none;
        margin: 0px 0;
        padding: 4px 0px 0px 2px;
        position: relative;
        &::before, &::after {
            content: '';
            left: -20px;
            position: absolute;
            right: auto;
        }
        &::before {
            border-left: 1px solid @grayLight;
            bottom: 50px;
            height: 100%;
            top: 0;
            width: 1px;
        }
        &::after {
            border-top: 1px solid @grayLight;
            height: 20px;
            top: 13px;
            width: 23px;
        }
        span {
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border: 1px solid @grayLight;
            border-radius: 5px;
            display: inline-block;
            line-height: 14px;
            padding: 2px 4px;
            text-decoration: none;
        }
        &.parent_li > span {
            cursor: pointer;
            /*Time for some hover effects*/
            &:hover, &:hover+ul li span {
                background: @grayLighter;
                border: 1px solid @gray;
                color: #000;
            }
        }
        /*Remove connectors after last child*/
        &:last-child::before {
            height: 30px;
        }
    }
    /*Remove connectors before root*/
    > ul > li::before, > ul > li::after {
        border: 0;
    }
}

edited May 23 '17 at 12:02

Community

1
1

answered May 29 '13 at 21:02

Jeromy French

11,812
19
76
129

well done. Except, of course, the odd behaviour of li children of `.parent_li` who lose their background color and become gray when their parent is hovered over (in your second tree). – kumarharsh May 30 '13 at 15:53
Thanks @Harsh. The hover behavior you think odd follows Vitaliy's programming to give the user a visual indicator of which nodes will be collapsed. – Jeromy French May 30 '13 at 17:55
What is the license of this code? I'd like to use it in my project! – Nathan Moos Jun 02 '13 at 03:22
@NathanMoos: Code can't get more public than the content contributed to this site. I'll even create a GitHub project for this tree if it proves sufficiently popular. Good luck! – Jeromy French Jun 02 '13 at 18:12
1

@JeromyFrench This tree has a very nice, smooth experience. Exactly what I was after when I searched. Good work. – Nathan Moos Jun 02 '13 at 22:00
@NathanMoos: Well, I'm thrilled to help. But Vitaly Bychick and Mehmet Ataş did all the heavy lifting. – Jeromy French Jun 02 '13 at 22:20
The accepted answer has changed hands again. This project deserves the tick :) – kumarharsh Aug 12 '13 at 13:01
5

thanks for the code. how do you collapse default? when you visit the page i want it to be collapsed? could you help me? thanks. – Erdem Ece Oct 05 '13 at 14:58
I updated the code and forked a new fiddle here for bootstrap 3.0: – jayseattle Apr 08 '14 at 20:43
I updated the code and forked a new fiddle here for bootstrap 3.0: http://jsfiddle.net/jayhilwig/hv8vU/ ___________________________________________________________ * 3.0 no longer uses badges as they were in this original fiddle so they are now buttons * gyphicons need different prefixing (no longer 'icon-x') – jayseattle Apr 08 '14 at 21:01
5

**http://jsfiddle.net/jayhilwig/hv8vU/** :: I updated the code and forked a new fiddle here for bootstrap 3.0: – jayseattle Apr 08 '14 at 21:06
I would also like to know how I could have it collapsed by default. – Bharat Feb 28 '15 at 00:39
@Bharat: create a SO question and I bet you'll get the assistance you need! – Jeromy French Mar 01 '15 at 14:29
@JeromyFrench, I've posted a new question: http://stackoverflow.com/questions/28974026/collapse-tree-by-default-in-jquery-twitter-bootstrap-treeview – Bharat Mar 10 '15 at 21:02
@Bharat : where'd your new question go?! – Jeromy French Mar 12 '15 at 13:25
I kind of figured it out myself. So deleted the question before anyone posted an answer. What I did was added a class to the li elements which I wanted to be hidden and added a .hide() to that class on page load. – Bharat Mar 12 '15 at 16:35
&:last-child::before { height: 30px; } should be 13px – Sergey Sep 24 '15 at 13:58
If the tree is very large, what is the best way to organize a search on it? to open a branch and a necessary element in a tree? – Mikhail Zhuikov Oct 10 '19 at 12:58
@Fox this would be a great question to ask https://stackoverflow.com/questions/ask – Jeromy French Oct 31 '19 at 16:29

score 79 · Answer 2 · edited Feb 03 '16 at 11:32

79

Can you believe that the treeview on the image below does not use any JavaScript, but relies only on CSS3? Check out this CSS3 TreeView, which is good with Twitter BootStrap:

You can get more info about this here http://acidmartin.wordpress.com/2011/09/26/css3-treevew-no-javascript/.

edited Feb 03 '16 at 11:32

Martijn Pieters

1,048,767
296
4,058
3,343

answered Jun 23 '12 at 15:54

Praveen Kumar Purushothaman

164,888
24
203
252

wow... this is a good one... i'll have to look into this... thanks... – kumarharsh Jun 24 '12 at 08:41
The solution seems good, but there are a few features, which we wanted and are not supplied in this version, such as branch highlighting, etc. But anyways, it is a very good example of how to do the tree styling – kumarharsh Aug 12 '12 at 11:56
1

found a nice example http://www.thecssninja.com/demo/css_tree/ – surya Mar 22 '13 at 19:33
1

Worth noting that the blog post referred to in the answer contains some simple CSS, which does not work for me, but the actual demo contains some more complicated (and not explained) CSS. – Robin Green Aug 01 '13 at 11:00
I feel that I should put some time into learning HTML5 + CSS3. This is some new generation candy that can reduce work time a lot. – Jānis Gruzis Feb 19 '14 at 09:46
Looking forward you to hit the great answer soon :) – Shankar Narayana Damodaran May 12 '14 at 11:02
May I know who's the downvoter? – Praveen Kumar Purushothaman Apr 26 '15 at 19:19
Can you at least use *your own wording* rather than just copy the blog intro? – Martijn Pieters Feb 01 '16 at 12:53
@MartijnPieters Sure, but I gave the attribution. Okay, I will edit the whole post again. It is very old post. – Praveen Kumar Purushothaman Feb 01 '16 at 12:54
@MartijnPieters The site is not accessible to me, as I am in work environment. It takes me another 6 hours to go home. I will update it as soon as possible. Thanks. – Praveen Kumar Purushothaman Feb 01 '16 at 12:56
@MartijnPieters Sorry about this. I have updated the post. It was realllly old one. – Praveen Kumar Purushothaman Feb 03 '16 at 06:29
At issue here is that your post consists solely of material written by others; there hardly is an original word in the post. You copied the blog post intro, and now added the code from the post. See [*How to reference material written by others*](https://stackoverflow.com/help/referencing): *Do not copy the complete text of external sources; instead, use their words and ideas **to support your own***. I wanted you to create some words of your own, not copy in more material written by others. – Martijn Pieters Feb 03 '16 at 11:31
@MartijnPieters Sure... Lemme try to reword the whole post and update you again. Thanks! `:)` – Praveen Kumar Purushothaman Feb 03 '16 at 11:33

score 55 · Answer 3 · answered Mar 18 '13 at 15:18

If someone wants vertical version of the treeview from Harsh's answer, you can save some time:

http://jsfiddle.net/Fh47n/

.tree li {
    margin: 0px 0;

    list-style-type: none;
    position: relative;
    padding: 20px 5px 0px 5px;
}

.tree li::before{
    content: '';
    position: absolute; 
    top: 0;
    width: 1px; 
    height: 100%;
    right: auto; 
    left: -20px;
    border-left: 1px solid #ccc;
    bottom: 50px;
}
.tree li::after{
    content: '';
    position: absolute; 
    top: 30px; 
    width: 25px; 
    height: 20px;
    right: auto; 
    left: -20px;
    border-top: 1px solid #ccc;
}
.tree li a{
    display: inline-block;
    border: 1px solid #ccc;
    padding: 5px 10px;
    text-decoration: none;
    color: #666;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

/*Remove connectors before root*/
.tree > ul > li::before, .tree > ul > li::after{
    border: 0;
}
/*Remove connectors after last child*/
.tree li:last-child::before{ 
      height: 30px;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
    background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
    border-color:  #94a0b4;
}

Simple and elegant. Upvoted :) – thefourtheye Jul 01 '13 at 06:27 — thefourtheye, Jul 01 '13 at 06:27
Wow, great solution - and easily extensible! – rkallensee Apr 08 '14 at 15:46 — rkallensee, Apr 08 '14 at 15:46
Where is the collapse expand functionality? – Aqeel Ashiq Aug 17 '15 at 13:05 — Aqeel Ashiq, Aug 17 '15 at 13:05

kumarharsh · Answer 4 · 2014-02-12T18:42:41.003

For those still searching for a tree with CSS3, this is a fantastic piece of code I found on the net:

http://thecodeplayer.com/walkthrough/css3-family-tree

HTML

<div class="tree">
  <ul>
    <li>
      <a href="#">Parent</a>
      <ul>
        <li>
          <a href="#">Child</a>
          <ul>
            <li>
              <a href="#">Grand Child</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Child</a>
          <ul>
            <li><a href="#">Grand Child</a></li>
            <li>
              <a href="#">Grand Child</a>
              <ul>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
              </ul>
            </li>
            <li><a href="#">Grand Child</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

CSS

* {margin: 0; padding: 0;}

.tree ul {
  padding-top: 20px; position: relative;

  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li {
  float: left; text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;

  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
  content: '';
  position: absolute; top: 0; right: 50%;
  border-top: 1px solid #ccc;
  width: 50%; height: 20px;
}
.tree li::after{
  right: auto; left: 50%;
  border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
  display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
  border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
  border-right: 1px solid #ccc;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
  content: '';
  position: absolute; top: 0; left: 50%;
  border-left: 1px solid #ccc;
  width: 0; height: 20px;
}

.tree li a{
  border: 1px solid #ccc;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;

  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;

  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
  background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
  border-color:  #94a0b4;
}

PS: apart from the code, I also like the way the site shows it in action... really innovative.

This is not really anything like the type of tree you suggested in your question. I believe Praveen Kumar should be awarded with his answer — Blowsie, Jan 17 '13 at 08:58
I was looking for a tree like the first one, saw this answer, and decided to use this instead. Funny how inspiration can change a solution! — Eric, Jan 19 '13 at 00:13
@Blowsie: I have taken your suggestion into consideration and justice has been served, lol. Its good to see a standalone project evolving due to some random request by some random guy. — kumarharsh, Aug 12 '13 at 13:03

Mehmet Ataş · Answer 5 · 2013-05-21T07:27:01.893

36

If someone wants expandable/collapsible version of the treeview from Vitaliy Bychik's answer, you can save some time :)

http://jsfiddle.net/mehmetatas/fXzHS/2/

$(function () {
    $('.tree li').hide();
    $('.tree li:first').show();
    $('.tree li').on('click', function (e) {
        var children = $(this).find('> ul > li');
        if (children.is(":visible")) children.hide('fast');
        else children.show('fast');
        e.stopPropagation();
    });
});

edited May 21 '13 at 07:27

answered May 21 '13 at 07:17

Mehmet Ataş

11,081
6
51
78

1

I added $('.tree > ul > li:first-child').show(); to support multiple trees on the page. Thanks – tribe84 Mar 22 '14 at 16:36

Gal Margalit · Answer 6 · 2013-02-18T14:03:50.757

8

Another great Treeview jquery plugin is http://www.jstree.com/

For an advance view you should check jquery-treetable
http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/

edited Feb 18 '13 at 14:03

answered Feb 18 '13 at 10:18

Gal Margalit

5,525
6
52
56

According to the site, it's not being supported any more since April 2010 – levelnis Feb 18 '13 at 10:27
oh its a shame that it's not being supported... looks good though. – kumarharsh Feb 18 '13 at 12:07
3

Hi, both libraries are up to date and are supported – Gal Margalit Feb 18 '13 at 14:05
They are supported - see https://github.com/ludo/jquery-treetable/releases – Bartek Jablonski Apr 16 '14 at 10:31

Trees in Twitter Bootstrap

6 Answers6

HTML

CSS

Linked

Related