How can I animate the opening/closing of table columns in jQuery?
I currently have this piece of code:
jQuery(function($){
$(".togglebutton").click(function(e){
if (cost_visible) {
$(".numbers").animate({width: 80}, 1500);
$(".costs").animate({width: 0}, 1500);
} else {
$(".numbers").animate({width: 0}, 1500);
$(".costs").animate({width: 60}, 1500);
}
});
});
and my HTML containing standard TABLE/TR/TH/TD tags with the TH and TD tags carrying the class names used to identify what has to be opened or closed.
The problem seems to be that after jQuery touches the table, the affected cells suddenly feel the need to stack on top of eachother instead of remaining neatly in a row.
I assume this has to do with jQuery being only able to animate "block" elements, not elements that are displayed "table-like". So can I make a table out of block elements? Or is there another way to animate table-like elements? I've found this suggested solution, but it seems like a hassle to encase all your table elements into DIV's just for the animation...