How to create a collapsing tree table in html css js

Question

I have some data to display that is both tabular and hierarchical  I d like to let the user be able to expand and collapse the nodes   Sort of like this  except functional   http   www maxdesign com au articles tree-table   What would be the best way to approach this  I m not adverse to using an off-the-shelf plugin

User · Answer

In modern browsers  you need only very little to code to create a collapsible tree     x000D   x000D  var tree   document querySelectorAll  ul tree a not  last-child     x000D  for var i   0  i  lt  tree length  i     x000D      tree i  addEventListener  click   function e    x000D          var parent   e target parentElement  x000D          var classList   parent classList  x000D          if classList contains  open      x000D              classList remove  open    x000D              var opensubs   parent querySelectorAll   scope  open    x000D              for var i   0  i  lt  opensubs length  i     x000D                  opensubs i  classList remove  open    x000D                x000D            else   x000D              classList add  open    x000D            x000D          e preventDefault    x000D          x000D    x000D  body   x000D      font-family  Arial  x000D    x000D   x000D  ul tree li   x000D      list-style-type  none  x000D      position  relative  x000D    x000D   x000D  ul tree li ul   x000D      display  none  x000D    x000D   x000D  ul tree li open  gt  ul   x000D      display  block  x000D    x000D   x000D  ul tree li a   x000D      color  black  x000D      text-decoration  none  x000D    x000D   x000D  ul tree li a before   x000D      height  1em  x000D      padding 0  1em  x000D      font-size   8em  x000D      display  block  x000D      position  absolute  x000D      left  -1 3em  x000D      top   2em  x000D    x000D   x000D  ul tree li  gt  a not  last-child  before   x000D      content       x000D    x000D   x000D  ul tree li open  gt  a not  last-child  before   x000D      content   -   x000D    x000D   lt ul class  tree  gt  x000D     lt li gt  lt a href     gt Part 1 lt  a gt  x000D       lt ul gt  x000D         lt li gt  lt a href     gt Item A lt  a gt  x000D           lt ul gt  x000D             lt li gt  lt a href     gt Sub-item 1 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 2 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 3 lt  a gt  lt  li gt  x000D           lt  ul gt  x000D         lt  li gt  x000D         lt li gt  lt a href     gt Item B lt  a gt  x000D           lt ul gt  x000D             lt li gt  lt a href     gt Sub-item 1 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 2 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 3 lt  a gt  lt  li gt  x000D           lt  ul gt  x000D         lt  li gt  x000D         lt li gt  lt a href     gt Item C lt  a gt  x000D           lt ul gt  x000D             lt li gt  lt a href     gt Sub-item 1 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 2 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 3 lt  a gt  lt  li gt  x000D           lt  ul gt  x000D         lt  li gt  x000D         lt li gt  lt a href     gt Item D lt  a gt  x000D           lt ul gt  x000D             lt li gt  lt a href     gt Sub-item 1 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 2 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 3 lt  a gt  lt  li gt  x000D           lt  ul gt  x000D         lt  li gt  x000D         lt li gt  lt a href     gt Item E lt  a gt  x000D           lt ul gt  x000D             lt li gt  lt a href     gt Sub-item 1 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 2 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 3 lt  a gt  lt  li gt  x000D           lt  ul gt  x000D         lt  li gt  x000D       lt  ul gt  x000D     lt  li gt  x000D   x000D     lt li gt  lt a href     gt Part 2 lt  a gt  x000D       lt ul gt  x000D         lt li gt  lt a href     gt Item A lt  a gt  x000D           lt ul gt  x000D             lt li gt  lt a href     gt Sub-item 1 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 2 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 3 lt  a gt  lt  li gt  x000D           lt  ul gt  x000D         lt  li gt  x000D         lt li gt  lt a href     gt Item B lt  a gt  x000D           lt ul gt  x000D             lt li gt  lt a href     gt Sub-item 1 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 2 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 3 lt  a gt  lt  li gt  x000D           lt  ul gt  x000D         lt  li gt  x000D         lt li gt  lt a href     gt Item C lt  a gt  x000D           lt ul gt  x000D             lt li gt  lt a href     gt Sub-item 1 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 2 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 3 lt  a gt  lt  li gt  x000D           lt  ul gt  x000D         lt  li gt  x000D         lt li gt  lt a href     gt Item D lt  a gt  x000D           lt ul gt  x000D             lt li gt  lt a href     gt Sub-item 1 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 2 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 3 lt  a gt  lt  li gt  x000D           lt  ul gt  x000D         lt  li gt  x000D         lt li gt  lt a href     gt Item E lt  a gt  x000D           lt ul gt  x000D             lt li gt  lt a href     gt Sub-item 1 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 2 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 3 lt  a gt  lt  li gt  x000D           lt  ul gt  x000D         lt  li gt  x000D       lt  ul gt  x000D     lt  li gt  x000D   x000D     lt li gt  lt a href     gt Part 3 lt  a gt  x000D       lt ul gt  x000D         lt li gt  lt a href     gt Item A lt  a gt  x000D           lt ul gt  x000D             lt li gt  lt a href     gt Sub-item 1 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 2 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 3 lt  a gt  lt  li gt  x000D           lt  ul gt  x000D         lt  li gt  x000D         lt li gt  lt a href     gt Item B lt  a gt  x000D           lt ul gt  x000D             lt li gt  lt a href     gt Sub-item 1 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 2 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 3 lt  a gt  lt  li gt  x000D           lt  ul gt  x000D         lt  li gt  x000D         lt li gt  lt a href     gt Item C lt  a gt  x000D           lt ul gt  x000D             lt li gt  lt a href     gt Sub-item 1 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 2 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 3 lt  a gt  lt  li gt  x000D           lt  ul gt  x000D         lt  li gt  x000D         lt li gt  lt a href     gt Item D lt  a gt  x000D           lt ul gt  x000D             lt li gt  lt a href     gt Sub-item 1 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 2 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 3 lt  a gt  lt  li gt  x000D           lt  ul gt  x000D         lt  li gt  x000D         lt li gt  lt a href     gt Item E lt  a gt  x000D           lt ul gt  x000D             lt li gt  lt a href     gt Sub-item 1 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 2 lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sub-item 3 lt  a gt  lt  li gt  x000D           lt  ul gt  x000D         lt  li gt  x000D       lt  ul gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D     see also this Fiddle

User · Answer

I ll throw jsTree into the ring  too   I ve found it fairly adaptable to your particular situation   It s packed as a jQuery plugin     It can run from a variety of data sources  but my favorite is a simple nested list  as described by  joe coolish or here    lt ul gt     lt li gt      Item 1      lt ul gt         lt li gt Item 1 1 lt  li gt                 lt  ul gt     lt  li gt         lt  ul gt    This structure fails gracefully into a static tree when JS is not available in the client  and is easy enough to read and understand from a coding perspective

User · Answer

jquery is your friend here   http   docs jquery com UI Tree  If you want to make your own  here is some high level guidance   Display all of your data as  lt ul   gt  elements with the inner data as nested  lt ul   gt   and then use the jquery       ulClass   click function      this  children   toggle          I believe that is correct   Something like that   EDIT   Here is a complete example    lt html gt   lt head gt       lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt       lt title gt  lt  title gt       lt script type  text javascript  src  https   ajax googleapis com ajax libs jquery 1 5 2 jquery min js  gt  lt  script gt   lt  head gt                                                                                                                                                                                   lt body gt   lt ul gt       lt li gt  lt span class  Collapsable  gt item 1 lt  span gt  lt ul gt           lt li gt  lt span class  Collapsable  gt item 1 lt  span gt  lt  li gt           lt li gt  lt span class  Collapsable  gt item 2 lt  span gt  lt ul gt               lt li gt  lt span class  Collapsable  gt item 1 lt  span gt  lt  li gt               lt li gt  lt span class  Collapsable  gt item 2 lt  span gt  lt  li gt               lt li gt  lt span class  Collapsable  gt item 3 lt  span gt  lt  li gt               lt li gt  lt span class  Collapsable  gt item 4 lt  span gt  lt  li gt           lt  ul gt           lt  li gt           lt li gt  lt span class  Collapsable  gt item 3 lt  span gt  lt  li gt           lt li gt  lt span class  Collapsable  gt item 4 lt  span gt  lt ul gt               lt li gt  lt span class  Collapsable  gt item 1 lt  span gt  lt  li gt               lt li gt  lt span class  Collapsable  gt item 2 lt  span gt  lt  li gt               lt li gt  lt span class  Collapsable  gt item 3 lt  span gt  lt  li gt               lt li gt  lt span class  Collapsable  gt item 4 lt  span gt  lt  li gt           lt  ul gt           lt  li gt       lt  ul gt       lt  li gt       lt li gt  lt span class  Collapsable  gt item 2 lt  span gt  lt ul gt           lt li gt  lt span class  Collapsable  gt item 1 lt  span gt  lt  li gt           lt li gt  lt span class  Collapsable  gt item 2 lt  span gt  lt  li gt           lt li gt  lt span class  Collapsable  gt item 3 lt  span gt  lt  li gt           lt li gt  lt span class  Collapsable  gt item 4 lt  span gt  lt  li gt       lt  ul gt       lt  li gt       lt li gt  lt span class  Collapsable  gt item 3 lt  span gt  lt ul gt           lt li gt  lt span class  Collapsable  gt item 1 lt  span gt  lt  li gt           lt li gt  lt span class  Collapsable  gt item 2 lt  span gt  lt  li gt           lt li gt  lt span class  Collapsable  gt item 3 lt  span gt  lt  li gt           lt li gt  lt span class  Collapsable  gt item 4 lt  span gt  lt  li gt       lt  ul gt       lt  li gt       lt li gt  lt span class  Collapsable  gt item 4 lt  span gt  lt  li gt   lt  ul gt   lt script type  text javascript  gt          Collapsable   click function                 this  parent   children   toggle              this  toggle               lt  script gt

User · Answer

You can try jQuery treegrid  http   maxazan github io jquery-treegrid   or jQuery treetable  http   ludo cubicphuse nl jquery-treetable    Both are using HTML  lt table gt  tag format and styled the as tree   The jQuery treetable is using data-tt-id and  data-tt-parent-id for determining the parent and child of the tree  Usage example    lt table id  tree  gt     lt tr data-tt-id  1  gt       lt td gt Parent lt  td gt     lt  tr gt     lt tr data-tt-id  2  data-tt-parent-id  1  gt       lt td gt Child lt  td gt     lt  tr gt   lt  table gt      tree   treetable   expandable  true       Meanwhile  jQuery treegrid is using only class for styling the tree  Usage example    lt table class  tree  gt       lt tr class  treegrid-1  gt           lt td gt Root node lt  td gt  lt td gt Additional info lt  td gt       lt  tr gt       lt tr class  treegrid-2 treegrid-parent-1  gt           lt td gt Node 1-1 lt  td gt  lt td gt Additional info lt  td gt       lt  tr gt       lt tr class  treegrid-3 treegrid-parent-1  gt           lt td gt Node 1-2 lt  td gt  lt td gt Additional info lt  td gt       lt  tr gt       lt tr class  treegrid-4 treegrid-parent-3  gt           lt td gt Node 1-2-1 lt  td gt  lt td gt Additional info lt  td gt       lt  tr gt   lt  table gt   lt script type  text javascript  gt        tree   treegrid     lt  script gt

User · Answer

SlickGrid has this functionality  see the tree demo   If you want to build your own  here is an example  jsFiddle demo   Build your table with a data-depth attribute to indicate the depth of the item in the tree  the levelX CSS classes are just for styling indentation   nbsp    lt table id  mytable  gt       lt tr data-depth  0  class  collapse level0  gt           lt td gt  lt span class  toggle collapse  gt  lt  span gt Item 1 lt  td gt           lt td gt 123 lt  td gt       lt  tr gt       lt tr data-depth  1  class  collapse level1  gt           lt td gt  lt span class  toggle  gt  lt  span gt Item 2 lt  td gt           lt td gt 123 lt  td gt       lt  tr gt   lt  table gt    Then when a toggle link is clicked  use Javascript to hide all  lt tr gt  elements until a  lt tr gt  of equal or less depth is found  excluding those already collapsed      function             mytable   on  click     toggle   function                Gets all  lt tr gt  s  of greater depth below element in the table         var findChildren   function  tr                var depth   tr data  depth                return tr nextUntil    tr   filter function                      return   this  data  depth    lt   depth                                       var el     this           var tr   el closest  tr      Get  lt tr gt  parent of toggle button         var children   findChildren tr              Remove already collapsed nodes from children so that we don t           make them visible              Confused  Remove this code and close Item 2  close Item 1            then open Item 1 again  then you will understand          var subnodes   children filter   expand            subnodes each function                  var subnode     this               var subnodeChildren   findChildren subnode               children   children not subnodeChildren                          Change icon and hide show children         if  tr hasClass  collapse                  tr removeClass  collapse   addClass  expand                children hide              else               tr removeClass  expand   addClass  collapse                children show                      return children

User · Answer

HTML 5 allows summary tag  details element  That can be used to view or hide  collapse expand  a section  Link

[javascript] How to create a collapsing tree table in html/css/js?

Examples related to javascript

Examples related to html

Examples related to css

Examples related to tree

Examples related to css-selectors