Can a table row expand and close

Question

Is it possible to make a table row expand and collapse  Can anyone refer me to a script or an example    I prefer jQuery if possible  I have a drawing concept I would like to achieve

User · Answer

Well  I d say use the DIV instead of table as it would be much easier  but there s nothing wrong with using tables     My approach would be to use jQuery ajax and request more data from server and that way  the selected DIV  or TD if you use table  will automatically expand based on requested content    That way  it saves bandwidth and makes it go faster as you don t load all content at once  It loads only when it s selected

User · Answer

To answer your question  no   That would be possible with div though   THe only question is would cause a hazzle if the functionality were done with div rather than tables

User · Answer

It depends on your mark-up  but it can certainly be made to work  I used the following   jQuery    document  ready    function          td p   slideUp           td h2   click        function             this  siblings  p   slideToggle                                html     lt table gt     lt thead gt       lt tr gt         lt th gt Actor lt  th gt         lt th gt Which Doctor lt  th gt         lt th gt Significant companion lt  th gt       lt  tr gt     lt  thead gt     lt tbody gt       lt tr gt         lt td gt  lt h2 gt William Hartnell lt  h2 gt  lt  td gt         lt td gt  lt h2 gt First lt  h2 gt  lt p gt Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas  lt  p gt  lt  td gt         lt td gt  lt h2 gt Susan Foreman lt  h2 gt  lt p gt Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas  Vestibulum tortor quam  feugiat vitae  ultricies eget  tempor sit amet  ante  Donec eu libero sit amet quam egestas semper  Aenean ultricies mi vitae est  Mauris placerat eleifend leo  lt  p gt  lt  td gt       lt  tr gt       lt tr gt         lt td gt  lt h2 gt Patrick Troughton lt  h2 gt  lt  td gt         lt td gt  lt h2 gt Second lt  h2 gt  lt p gt Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas  lt  p gt  lt  td gt         lt td gt  lt h2 gt Jamie MacCrimmon lt  h2 gt  lt p gt Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas  Vestibulum tortor quam  feugiat vitae  ultricies eget  tempor sit amet  ante  Donec eu libero sit amet quam egestas semper  Aenean ultricies mi vitae est  Mauris placerat eleifend leo  lt  p gt  lt  td gt       lt  tr gt       lt tr gt         lt td gt  lt h2 gt Jon Pertwee lt  h2 gt  lt  td gt         lt td gt  lt h2 gt Third lt  h2 gt  lt p gt Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas  lt  p gt  lt  td gt         lt td gt  lt h2 gt Jo Grant lt  h2 gt  lt p gt Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas  Vestibulum tortor quam  feugiat vitae  ultricies eget  tempor sit amet  ante  Donec eu libero sit amet quam egestas semper  Aenean ultricies mi vitae est  Mauris placerat eleifend leo  lt  p gt  lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt    The way I approached it is to collapse specific elements within the cells of the row  so that  in my case  the row would slideUp   as the paragraphs were hidden  and still leave an element  h2 to click on in order to re-show the content  If the row collapsed entirely there d be no easily obvious way to bring it back   Demo at JS Bin    As  Peter Ajtai noted  in the comments  the above approach focuses on only one cell  though deliberately   To expand all the child p elements this would work     document  ready    function          td p   slideUp           td h2   click        function             this  closest  tr   find  p   slideToggle                                Demo at JS Bin

User · Answer

You could do it like this   HTML   lt table gt       lt tr gt           lt td gt Cell 1 lt  td gt           lt td gt Cell 2 lt  td gt           lt td gt Cell 3 lt  td gt           lt td gt Cell 4 lt  td gt           lt td gt  lt a href     id  show 1  gt Show Extra lt  a gt  lt  td gt       lt  tr gt       lt tr gt           lt td colspan  5  gt               lt div id  extra 1  style  display  none   gt                   lt br gt hidden row                  lt br gt hidden row                  lt br gt hidden row              lt  div gt           lt  td gt       lt  tr gt   lt  table gt    jQuery     a id  show     click function event            extra       this  attr  id   substr 5   slideToggle  slow        event preventDefault          See a demo on JSFiddle

User · Answer

jQuery    function            td colspan 3    find  div   hide           tr   click function event            var  target     event target            target closest  tr   next   find  div   slideToggle                                  HTML   lt table gt       lt thead gt           lt tr gt               lt th gt one lt  th gt  lt th gt two lt  th gt  lt th gt three lt  th gt           lt  tr gt       lt  thead gt       lt tbody gt            lt tr gt               lt td gt  lt p gt data lt p gt  lt  td gt  lt td gt data lt  td gt  lt td gt data lt  td gt           lt  tr gt           lt tr gt               lt td colspan  3  gt                   lt div gt                       lt table gt                               lt tr gt                                   lt td gt data lt  td gt  lt td gt data lt  td gt                               lt  tr gt                       lt  table gt                   lt  div gt               lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt    This is much like a previous example above  I found when trying to implement that example that if the table row to be expanded was clicked while it was not expanded it would disappear  and it would no longer be expandable  To fix that I simply removed the ability to click the expandable element for slide up and made it so that you can only toggle using the above table row     I also made some minor changes to HTML and corresponding jQuery     NOTE  I would have just made a comment but am not allowed to yet therefore the long post  Just wanted to post this as it took me a bit to figure out what was happening to the disappearing table row   Credit to Peter Ajtai

User · Answer

Yes  a table row can slide up and down  but it s ugly  since it changes the shape of the table and makes everything jump  Instead  put and element in each td    something that makes sense like a p or h2 etc   For how to implement a table slide toggle     It s probably simplest to put the click handler on the entire table   stopPropagation   and check what was clicked   If a td in a row with a colspan is clicked  close the p in it  If it s not a td in a row with a colspan  then close then toggle the following row s p   It is essentially to wrap all your written content in an element inside the tds  since you never want to slideUp a td or tr or table shape will change   Something like     function               Initially hide toggleable content        td colspan 3    find  p   hide              Click handler on entire table        table   click function event                  No bubbling up         event stopPropagation             var  target     event target                 Open and close the appropriate thing         if    target closest  td   attr  colspan    gt  1                  target slideUp              else                target closest  tr   next   find  p   slideToggle                                                 Try it out with this jsFiddle example       and try out this jsFiddle showing implementation of a   - - toggle    The HTML just has to have alternating rows of several tds and then a row with a td of a colspan greater than 1  You can obviously adjust the specifics quite easily   The HTML would look something like    lt table gt       lt tr gt  lt td gt  lt p gt Name lt  p gt  lt  td gt  lt td gt  lt p gt Age lt  p gt  lt  td gt  lt td gt  lt p gt Info lt  p gt  lt  td gt  lt  tr gt       lt tr gt  lt td colspan  3  gt  lt p gt Blah blah blah blah blah blah blah  lt  p gt       lt  td gt  lt  tr gt        lt tr gt  lt td gt  lt p gt Name lt  p gt  lt  td gt  lt td gt  lt p gt Age lt  p gt  lt  td gt  lt td gt  lt p gt Info lt  p gt  lt  td gt  lt  tr gt       lt tr gt  lt td colspan  3  gt  lt p gt Blah blah blah blah blah blah blah  lt  p gt       lt  td gt  lt  tr gt        lt tr gt  lt td gt  lt p gt Name lt  p gt  lt  td gt  lt td gt  lt p gt Age lt  p gt  lt  td gt  lt td gt  lt p gt Info lt  p gt  lt  td gt  lt  tr gt       lt tr gt  lt td colspan  3  gt  lt p gt Blah blah blah blah blah blah blah  lt  p gt       lt  td gt  lt  tr gt       lt  table gt

[jquery] Can a table row expand and close?

Examples related to jquery

Examples related to tablelayout