expand collapse table rows with JQuery

Question

I want to expand and collapse table rows when header columns is clicked  I only want to expand collapse rows which are under the specific header  clicked    Here is my table structure    x000D   x000D    lt table border  0  gt  x000D         lt tr gt  x000D           lt td colspan  2  gt Header lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt data lt  td gt  x000D           lt td gt data lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt data lt  td gt  x000D           lt td gt data lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td colspan  2  gt Header lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt date lt  td gt  x000D           lt td gt data lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt data lt  td gt  x000D           lt td gt data lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt data lt  td gt  x000D           lt td gt data lt  td gt  x000D         lt  tr gt  x000D       lt  table gt  x000D   x000D   x000D    Any thoughts on how can I accomplish this task  Using div this task seems quite simple  but I have tabular data which I want to manipulate   One idea I can think of is to use css class in every row which distinguish rows in under each header and use JQuery to expand collapse those rows only when header is clicked  But if my table has 10-15 headers then it seems difficult to keep track of css classes   Please suggest a suitable way to achieve this

User · Answer

using jQuery it s easy         YOUR CLASS SELECTOR   click function                   this  toggle

User · Answer

The easiest way to achieve this  without changing the HTML table-based structure  is to use a class-name on the tr elements containing a header  such as  header  to give    lt table border  0  gt     lt tr class  header  gt       lt td colspan  2  gt Header lt  td gt     lt  tr gt     lt tr gt       lt td gt data lt  td gt       lt td gt data lt  td gt     lt  tr gt     lt tr gt       lt td gt data lt  td gt       lt td gt data lt  td gt     lt  tr gt     lt tr class  header  gt       lt td colspan  2  gt Header lt  td gt     lt  tr gt     lt tr gt       lt td gt date lt  td gt       lt td gt data lt  td gt     lt  tr gt     lt tr gt       lt td gt data lt  td gt       lt td gt data lt  td gt     lt  tr gt     lt tr gt       lt td gt data lt  td gt       lt td gt data lt  td gt     lt  tr gt   lt  table gt    And the jQuery      bind a click-handler to the  tr  elements with the  header  class-name     tr header   click function           get all the subsequent  tr  elements until the next  tr header          set the  display  property to  none   if they re visible   to  table-row         if they re not           this  nextUntil  tr header   css  display   function i v           return this style display      table-row     none     table-row                 JS Fiddle demo   In the linked demo I ve used CSS to hide the tr elements that don t have the header class-name  in practice though  despite the relative rarity of users with JavaScript disabled  I d suggest using JavaScript to add the relevant class-names  hiding and showing as appropriate      hide all  tr  elements  then filter them to find       tr   hide   filter function             only those  tr  elements that have  td  elements with a  colspan  attribute      return   this  find  td colspan    length         add the  header  class to those found  tr  elements    addClass  header          set the display of those elements to  table-row      css  display    table-row          bind the click-handler  as above     click function            this  nextUntil  tr header   css  display   function  i  v            return this style display      table-row     none     table-row                 JS Fiddle demo   References    addClass    click    css    filter    find    hide    nextUntil

User · Answer

A JavaScript accordion does the trick    This fiddle by W3Schools makes a simple task even more simple using nothing but javascript  which i partially reproduce below    lt head gt   lt style gt  button accordion       background-color   eee      color   444      font-size  15px      cursor  pointer     button accordion active  button accordion hover       background-color   ddd      div panel       padding  0 18px      display  none      background-color  white     div panel show       display  block     lt  style gt   lt  head gt  lt body gt   lt script gt  var acc   document getElementsByClassName  accordion    var i   for  i   0  i  lt  acc length  i          acc i  onclick   function        this classList toggle  active        this nextElementSibling classList toggle  show           lt  script gt       lt button class  accordion  gt Section 1 lt  button gt   lt div class  panel  gt     lt p gt Lorem ipsum dolor sit amet lt  p gt   lt  div gt       lt button class  accordion  gt Table lt  button gt   lt div class  panel  gt     lt p gt  lt table name  detail table  gt     lt  table gt  lt  p gt   lt  div gt       lt button class  accordion  gt  lt table name  button table  gt     lt  table gt  lt  button gt   lt div class  panel  gt     lt p gt Lorem ipsum dolor sit amet lt  p gt     lt table name  detail table  gt     lt  table gt     lt img src     gt  lt  img gt   lt  div gt       lt  body gt  lt  html gt    if using php  don t forget to convert   to     You can also use tables of data inside the button and it will still work

User · Answer

I liked the simplest answer provided  However  I didn t like the choppiness of the collapsing  So I combined a solution from this question  How to Use slideDown  or show  function on a table row  to make it a smoother animation when the rows slide up or down  It involves having to wrap the content of each td in a div  This allows it to smoothly animate the collapsing  When the rows are expanded  it will replace the div  with just the content   So here s the html    lt table gt   lt tr class  header  gt       lt td gt CARS lt  td gt   lt  tr gt   lt tr class  thing  gt       lt td gt car lt  td gt   lt  tr gt   lt tr class  thing  gt       lt td gt truck lt  td gt   lt  tr gt   lt tr class  header  gt       lt td gt HOUSES lt  td gt   lt  tr gt   lt tr class  thing  gt       lt td gt split level lt  td gt   lt  tr gt   lt tr class  thing  gt       lt td gt trailer lt  td gt   lt  tr gt      And here s the js      header   click function    if   this  hasClass  collapsed           this  nextUntil  tr header        find  td        parent        find  td  gt  div        slideDown  fast   function            var  set     this            set replaceWith  set contents                   this  removeClass  collapsed      else         this  nextUntil  tr header        find  td        wrapInner   lt div style  display  block     gt         parent        find  td  gt  div        slideUp  fast          this  addClass  collapsed            Checkout this fiddle for an example https   jsfiddle net p9mtqhm7 52

User · Answer

You can try this way -  Give a class say header to the header rows  use nextUntil to get all rows beneath the clicked header until the next header   JS      header   click function          this  nextUntil  tr header   slideToggle 1000         Html   lt table border  0  gt     lt tr  class  header  gt       lt td colspan  2  gt Header lt  td gt     lt  tr gt     lt tr gt       lt td gt data lt  td gt       lt td gt data lt  td gt     lt  tr gt     lt tr gt       lt td gt data lt  td gt       lt td gt data lt  td gt     lt  tr gt    Demo  Another Example       header   click function         this  find  span   text function    value  return value   -       -           this  nextUntil  tr header   slideToggle 100      or just use  toggle          Demo  You can also use promise to toggle the span icon text after the toggle is complete in-case of animated toggle       header   click function          var  this     this         this  nextUntil  tr header   slideToggle 100  promise   done function               this find  span   text function     value                return value     -           -                             promise     slideToggle    Or just with a css pseudo element to represent the sign of expansion collapse  and just toggle a class on the header   CSS -   header  sign after    content        display inline-block           header expand  sign after    content  -       JS -    this  toggleClass  expand   nextUntil  tr header   slideToggle 100     Demo

User · Answer

I would say using the data- attribute to match the headers with the elements inside it  Fiddle   http   jsfiddle net GbRAZ 1   A preview of the HTML alteration        lt tr class  header  id  header1  gt       lt td colspan  2  gt Header lt  td gt      lt  tr gt      lt tr data-for  header1  style  display none  gt        lt td gt data lt  td gt        lt td gt data lt  td gt      lt  tr gt      lt tr data-for  header1  style  display none  gt        lt td gt data lt  td gt        lt td gt data lt  td gt      lt  tr gt    JS code        header   click function             data-for   this id      slideToggle  slow          EDIT  But  it involves some HTML changes  so I dunno if thats what you wanted  A better way to structure this would be using  lt th gt  or by changing the entire html to use ul  ol  etc or even a div  gt  span setup

User · Answer

I expanded one of the answers  however my functionality is a bit different  In my version  different rows form different groups  And  header  row triggers collapsing expanding of that particular group  Also  each individual subgroup memorizes state that its in  It might sound a bit confusing  you can test drive my version using jsfiddle  Hope this code snippets will be helpful to someone out there   HTML   lt table border  0  gt     lt tr gt         lt th gt Header 1 lt  th gt         lt th gt Header 2 lt  th gt     lt  tr gt     lt tr gt       lt td class  group1  gt Group 1 lt  td gt       lt td gt data 2 lt  td gt     lt  tr gt     lt tr class  group1  gt       lt td gt data 3 lt  td gt       lt td gt data 4 lt  td gt     lt  tr gt     lt tr gt       lt td class  group2  gt Group 2 lt  td gt       lt td gt data 2 lt  td gt     lt  tr gt     lt tr class  group2  gt       lt td gt data 3 lt  td gt       lt td gt data 4 lt  td gt     lt  tr gt     lt tr class  group2  gt       lt td class  sub group1  gt Sub Group 1 lt  td gt       lt td gt data 6 lt  td gt     lt  tr gt     lt tr class  group2 sub group1  gt       lt td gt data 7 lt  td gt       lt td gt data 8 lt  td gt     lt  tr gt     lt tr class  group2 sub group1  gt       lt td gt data 9 lt  td gt       lt td gt data 10 lt  td gt     lt  tr gt     lt tr class  group2 sub group1  gt       lt td class  sub sub group1  gt Sub Sub Group 1 lt  td gt       lt td gt data 11 lt  td gt     lt  tr gt     lt tr class  group2 sub group1 sub sub group1  gt       lt td gt data 12 lt  td gt       lt td gt data 13 lt  td gt     lt  tr gt     lt tr class  group2 sub group1 sub sub group1  gt       lt td gt data 14 lt  td gt       lt td gt data 15 lt  td gt     lt  tr gt     lt tr class  group2  gt       lt td class  sub group2  gt Sub Group 2 lt  td gt       lt td gt data 11 lt  td gt     lt  tr gt     lt tr class  group2 sub group2  gt       lt td gt data 12 lt  td gt       lt td gt data 13 lt  td gt     lt  tr gt     lt tr class  group2 sub group2  gt       lt td gt data 14 lt  td gt       lt td gt data 15 lt  td gt     lt  tr gt   lt  table gt    CSS  table  tr  td  th       border  1px solid black      border-collapse collapse     img button open    content url  http   code stephenmorley org javascript collapsible-lists button-open png      cursor pointer     img button closed    content  url  http   code stephenmorley org javascript collapsible-lists button-closed png      cursor pointer      JS  function CreateGroup group name           Create Button Image         td     group name  prepend   lt img class      group name     button closed  gt             Add Padding to Data        tr     group name  each function              var first td     this  children  td   first            var padding left   parseInt   first td  css  padding-left               first td  css  padding-left   String padding left   25     px                RestoreGroup group name           Tie toggle function to the button        img     group name  click function            ToggleGroup group name              function ToggleGroup group name        ToggleButton    img     group name        RestoreGroup group name      function RestoreGroup group name        if     img     group name  hasClass  button open                     Open everything            tr     group name  show                Close subgroups that been closed            tr     group name  find  img button closed   each function                  sub group name     this  attr  class   split   s    0                 console log sub group name               RestoreGroup sub group name                          if     img     group name  hasClass  button closed                     Close everything            tr     group name  hide             function ToggleButton button          button  toggleClass  button open          button  toggleClass  button closed       CreateGroup  group1    CreateGroup  group2    CreateGroup  sub group1    CreateGroup  sub group2    CreateGroup  sub sub group1      DEMO

[jquery] expand/collapse table rows with JQuery

Examples related to jquery

Examples related to html

Examples related to css