title: Expand table row to show more data
body: <p>I have a table and what i am trying to do is have a button / link in one of the columns that once it is clicked another row appears underneath with more information in it.</p>
  
  <p>I have started to build an example, the problem i have is that both rows are currently visible and when i click on the view link both rows slide down.  What i am actually trying to do is have one row visible and then when i click on view, the second row becomes visible.</p>
  
  <p>here is a link to my Demo :  <a href="http://jsfiddle.net/leest/Jgrja/" rel="nofollow">http://jsfiddle.net/leest/Jgrja/</a></p>
  
  <p>And Here is my code</p>
  
  <p>HTML</p>
  
  <pre><code> &lt;table class=""&gt;
              &lt;!-- Table heading --&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Rendering eng.&lt;/th&gt;
                      &lt;th&gt;Browser&lt;/th&gt;
                      &lt;th&gt;Platform(s)&lt;/th&gt;
                      &lt;th&gt;Eng. vers.&lt;/th&gt;
                      &lt;th&gt;CSS grade&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;!-- // Table heading END --&gt;
  
              &lt;!-- Table body --&gt;
              &lt;tbody&gt;
                  &lt;!-- Table row --&gt;
                  &lt;tr class="gradeX"&gt;
                      &lt;td&gt;Trident&lt;/td&gt;
                      &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                      &lt;td&gt;Win 95+&lt;/td&gt;
                      &lt;td class="center"&gt;4&lt;/td&gt;
                      &lt;td class="center"&gt;&lt;a href="#"   class="show_hide" rel="#slidingDiv"&gt;View&lt;/a&gt;&lt;br /&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;div id="slidingDiv"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Trident&lt;/td&gt;
                      &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                      &lt;td&gt;Win 95+&lt;/td&gt;
                      &lt;td class="center"&gt;4&lt;/td&gt;
                      &lt;td class="center"&gt;X&lt;/td&gt;
                       &lt;/div&gt;
                  &lt;/tr&gt;
  
              &lt;/tbody&gt;
  
          &lt;/table&gt;
  </code></pre>
  
  <p>JavaScript Code</p>
  
  <pre><code>    $(document).ready(function(){
  
  
      $('.show_hide').showHide({           
      speed: 1000,  // speed you want the toggle to happen    
      easing: '',  
      changeText: 1, // if you dont want the button text to change, set this to 0
      showText: 'View',// the button text to show when a div is closed
      hideText: 'Close' // the button text to show when a div is open
  
      }); 
  
  
            }); 
  
  
    (function ($) {
  $.fn.showHide = function (options) {
  
      //default vars for the plugin
      var defaults = {
          speed: 1000,
          easing: '',
          changeText: 0,
          showText: 'Show',
          hideText: 'Hide'
  
      };
      var options = $.extend(defaults, options);
  
      $(this).click(function () { 
  
           $('.toggleDiv').slideUp(options.speed, options.easing);    
           // this var stores which button you've clicked
           var toggleClick = $(this);
           // this reads the rel attribute of the button to determine which div id to toggle
           var toggleDiv = $(this).attr('rel');
            using which easing effect
           $(toggleDiv).slideToggle(options.speed, options.easing, function() {
           // this only fires once the animation is completed
           if(options.changeText==1){
           $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
           }
                 });
  
        return false;
  
                });
  
              };
             })(jQuery);
  </code></pre>
  
  <p>I am not sure if i am going the right way about this and so any suggestions would be appreciated.</p>
  
  <p>Thanks</p>