title: Animating opening/closing of table columns in jQuery
body: <p>How can I animate the opening/closing of table columns in jQuery?</p>
  
  <p>I currently have this piece of code:</p>
  
  <pre><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);
          }
      });
  });
  </code></pre>
  
  <p>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.</p>
  
  <p>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. </p>
  
  <p>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 <a href="http://www.tino.nl/index.php/2009/08/05/table-animations-in-jquery/" rel="noreferrer">this</a> suggested solution, but it seems like a hassle to encase all your table elements into DIV's just for the animation...</p>