Ok, if you go here: http://jsfiddle.net/RarFB/2/
You will see the work that I have done on this so far. The problem I’m having here is that the > sign at the top of each box is not providing a smooth animation of the <td> elements, when clicked on. I have a <td><div class="enabled">ALL CONTENT IN BOX</div></td> setup, but am hoping to get something to work here. Basically, I need all of the elements to align properly, the way it sorta does already when a new colspan is added. BTW, I haven’t written the code to reduce a colspan yet. Just trying to wrap my head around animating a colspan.
Any help on this would be greatly appreciated, because the animation of the box when you click on the > arrow is not even close to smooth, and wondering on how I can get this to be nice and smooth.
Thanks and sorry for all of the extra code in CSS, but it will take me hours to go through it all and sift out the relevant rules for this example alone, cause this is just part of a much bigger software.
I think this is what you want: http://jsfiddle.net/brianpeiris/RarFB/3/
You were setting the “width” attribute on your cells, which doesn’t really make sense, since the width of the cells is already determined by a combination of the table with and the colspan.
I also simplified your jQuery a bit — you don’t have to do a separate operation on “each” element in a jQuery set, just perform the operation on the set itself and jQuery will take care of the rest.