title: toggle slide from left to right with smooth movement on click of a show/hide button
body: <p>I have a table with 4 columns and 10 rows having the 4th column hidden by default. 
  There is a show/hide image button in the 1st row.</p>
  
  <p>What I need is, when I click on the show/hide image button:</p>
  
  <ol>
  <li>the 4th column to appear as if sliding in from left to right</li>
  <li>a modal overlay div to appear (like lightbox,shadowbox etc.) that will have a close button</li>
  <li>when I close the modal window and then click on of the show/hide image button again, the 4th column should slide out to left.</li>
  </ol>
  
  <p>The code that I have written is working for me, but it does not slide in from 3rd column towards right and slide back on click again. Also the modal overlay is not working when I click the show/hide button.
  Need some help on this to fix.</p>
  
  <p>This is my code:</p>
  
  <pre><code>.subtn{
  display:inline-block;
  background:url("images/next_right.png") right 0px no-repeat;
  width:16px;
  height:16px;
  }
  .subtn.expanded{
  background:url("images/previous_left.png") right 0px no-repeat;
  width:16px;
  height:16px;
  }
  
  
  
  
  $(document).ready(function(){
    var $content = $("td:nth-child(4)").hide();
    $(".subtn").on("click", function(e){
      $(this).toggleClass("expanded");
      $content.slideToggle();
    });
  });
  
  
  
  &lt;table&gt;
  &lt;tr&gt;
          &lt;td colspan="4" align="right"&gt;&lt;a href="#" rel="lightbox" class="subtn"&gt;&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;sam&lt;/td&gt;
          &lt;td&gt;europe&lt;/td&gt;
          &lt;td style="display:none;"&gt;new&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;7&lt;/td&gt;
          &lt;td&gt;john&lt;/td&gt;
          &lt;td&gt;europe&lt;/td&gt;
          &lt;td style="display:none;"&gt;new&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;4&lt;/td&gt;
          &lt;td&gt;bob&lt;/td&gt;
          &lt;td&gt;africa&lt;/td&gt;
          &lt;td style="display:none;"&gt;new&lt;/td&gt;
      &lt;/tr&gt;
  
  &lt;/table&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/pEKvq/4/" rel="nofollow">JS FIDDLE LINK</a> </p>