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

User · Answer

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

User · Answer

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    For extra credit  I ve created a 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           amp   before   amp   after               content                  left  -20px              position  absolute              right  auto                     amp   before               border-left  1px solid  grayLight              bottom  50px              height  100               top  0              width  1px                     amp   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                     amp  parent li  gt  span               cursor  pointer                Time for some hover effects                amp  hover   amp  hover ul li span                   background   grayLighter                  border  1px solid  gray                  color   000                                    Remove connectors after last child            amp  last-child  before               height  30px                        Remove connectors before root        gt  ul  gt  li  before   gt  ul  gt  li  after           border  0

User · Answer

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   lt div class  tree  gt     lt ul gt       lt li gt         lt a href     gt Parent lt  a gt         lt ul gt           lt li gt             lt a href     gt Child lt  a gt             lt ul gt               lt li gt                 lt a href     gt Grand Child lt  a gt               lt  li gt             lt  ul gt           lt  li gt           lt li gt             lt a href     gt Child lt  a gt             lt ul gt               lt li gt  lt a href     gt Grand Child lt  a gt  lt  li gt               lt li gt                 lt a href     gt Grand Child lt  a gt                 lt ul gt                   lt li gt                     lt a href     gt Great Grand Child lt  a gt                   lt  li gt                   lt li gt                     lt a href     gt Great Grand Child lt  a gt                   lt  li gt                   lt li gt                     lt a href     gt Great Grand Child lt  a gt                   lt  li gt                 lt  ul gt               lt  li gt               lt li gt  lt a href     gt Grand Child lt  a gt  lt  li gt             lt  ul gt           lt  li gt         lt  ul gt       lt  li gt     lt  ul gt   lt  div gt    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

User · Answer

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   gt  ul  gt  li            if  children is   visible    children hide  fast            else children show  fast            e stopPropagation

User · Answer

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

User · Answer

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  gt  ul  gt  li  before   tree  gt  ul  gt  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

[javascript] Trees in Twitter Bootstrap

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to css

Examples related to jquery-ui