More table tricks: Collapsible Tables with DOM
Working with Mint I was missing an option to collapse the different panes when I don’t want to read them.
Some hacking later, I wrote a script that automatically allows you to collapse and expand a table by activating its footer. As a visual indicator, the script adds an image to the footer (this also allows keyboard access).
It is a work in progress and I need your help to fix it for Opera and get rid of a weird Firefox issue.
“See the collapsible tables demo”:http://icant.co.uk/sandbox/footercollapsetables/
September 7th, 2005 at 4:15 pm
Was just looking for this table trick to add to my site. Mint is just absolutely fantastic, dont you reckon? I’m usnig it over my site too.
Just wondering whether does your script degrade itself if users did not enable javascript?
September 7th, 2005 at 4:20 pm
Well, that is easy to find out, isn’t it? :-)
September 7th, 2005 at 4:55 pm
Interesting now you’ve fixed the borders on FireFox the Opera problems aren’t so bad as before.
November 8th, 2005 at 4:50 am
Interstingly now it seems that your “Collapsible Tables” works on firefox and latest version of Opera. Cheers :)
December 14th, 2005 at 10:20 am
Nice, but the “open/close” arrow should not move, so that the user can click close without having to move his mouse
September 28th, 2006 at 3:04 pm
This works as it should in opera 9, cheers.
December 26th, 2006 at 3:05 pm
ist here any whay we can have the html itself ?
thank you
January 19th, 2007 at 9:50 am
about the Opera bug you have listed on the “Collapsible tables with DOM and CSS” page… I can’t see it. it looks absolutely the same for me in opera 9.10 as it does in firefox 2.0
Cheers.
January 20th, 2007 at 3:43 am
I will try it.Its really cool.Something i wanted
Thx a lot
Ashish
March 17th, 2007 at 9:05 am
Add this to your script:
from simon dot incutio dot com
check: archive/2004/05/26/addLoadEvent
function addLoadEvent(func)
{
var oldonload = window.onload;
if (typeof window.onload != ‘function’)
{
window.onload = func;
}
else
{
window.onload = function()
{
oldonload();
func();
}
}
}
Then remove the last line and call it like so:
addLoadEvent(initPopUpLinks);
March 18th, 2007 at 12:06 am
why dont you just hide
April 13th, 2007 at 11:05 pm
One more post to tell that latest version of Opera (9.10 on Ubuntu here) nifty displays the array.
April 18th, 2007 at 5:42 pm
How can I change the size of the image?
Thanks
May 17th, 2007 at 9:03 pm
How can I change the code so that it is the header that will collapse the rows?
June 1st, 2007 at 12:17 pm
@Joe
Easy just edit the .js file where it says tfoot replace it with thead.
June 9th, 2007 at 11:21 am
Doesent work in Firefox 2.0.0.4!
:-((
July 4th, 2007 at 9:54 pm
This is great! I’ve switched the tfoot to thead in the .js file to get the top row to activate the collapse. I can’t fathom out how to get the arrow up there in the first row as well… any chance of a bit of help?
July 6th, 2007 at 6:03 pm
I’m having the same problem as Basquen.
I want the header to include the arrow and be clickable to collapse. By changing the js entries of “tfoot” to “thead” it the head becomes clickable, but I’m at a loss as to how to move the arrow to the head.
Hopefully someone can help.
July 9th, 2007 at 3:59 pm
Hi Chris,
As well as the tfoot > thead edit I’ve also changed this part of line 48:
getElementsByTagName(‘td’)
to point to the header
getElementsByTagName(‘th’)
Works fine now.
New problem – I’ve got 6 of these tables on one page – the final touch would be to have a close all/hide all link to control them all in one go… Any ideas ?
July 16th, 2007 at 11:03 am
hi chris…
to change arrow from foot to header change last row of the css file to:
table.footcollapse thead th img{
border:none;
vertical-align:bottom;
padding-left:10px;
float:right;
}
August 18th, 2007 at 6:45 am
nice js trick to change the images, i plan on using this in conjunction with the .toggle function in the script.aculo.us js library so the table would ‘Blind up’ or ‘Blind Down’ as needed
August 22nd, 2007 at 1:46 pm
It seams that there is no problem with the Display in Opera. It looks absolutly like in IE7. (Opera 9.23)
September 9th, 2007 at 7:53 am
Hi,
Good work !
I have five tables as in the example. What should i do to collapse specific tables initially that i wish ? Later the collapsible also should work. In simple words the first table should be collapsed when page is looaded.
Any ideas ? Awaiting ur reply.
September 9th, 2007 at 7:59 am
Hi,
Good Work !
Please tell me how to collapse a particular table initially when the page is loaded. Lets say we hav 5 tables and the first tbale should be colapsed initially.
Awaiting ur reply.
September 10th, 2007 at 5:48 am
nice trick to change the images, really loved it…
October 8th, 2007 at 12:53 am
This is great. I was looking for something like this. I did have one question how do I get the images from the last cell on the right to the first on the left?
Thanks for your help and for the code.
November 11th, 2007 at 8:29 am
Hi Chris,
Love the script but how would you get it to collapse only some of the rows in a table as opposed to the entire table?
I want to display some ‘important’ information in a table initially and then expand the table to show extra details – as in this page which doesn’t work in Opera.
http://w-f-t.co.uk/index.php?page=ind&genID=1&pid=I32
Scroll down to the ‘Personal Details’ and click on the ‘+’ icon to see what I mean.
Keep it up!
RottenSod
January 18th, 2008 at 12:25 am
Just dropping a line to say this is fully working with opera 9.25 under linux (debian lenny)
December 24th, 2008 at 12:36 pm
it’s good but can you make is slide up and down smoothly instead of static?
January 7th, 2009 at 10:39 am
Hey everything works perfect in firefox,opera,ie6,ie7,chrome. Thanks man. Then why you ned to fix issues?
October 13th, 2009 at 6:54 pm
nice tut!
but could u mind help me to make my comment form be collapsible like your tut …
November 17th, 2009 at 6:46 am
Great Job!
This script is really helpful for me.
Thanks!