Expand table row to show more data

Question

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.

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.

here is a link to my Demo : http://jsfiddle.net/leest/Jgrja/

And Here is my code

HTML

 <table class="">
            <!-- Table heading -->
            <thead>
                <tr>
                    <th>Rendering eng.</th>
                    <th>Browser</th>
                    <th>Platform(s)</th>
                    <th>Eng. vers.</th>
                    <th>CSS grade</th>
                </tr>
            </thead>
            <!-- // Table heading END -->

            <!-- Table body -->
            <tbody>
                <!-- Table row -->
                <tr class="gradeX">
                    <td>Trident</td>
                    <td>Internet Explorer 4.0</td>
                    <td>Win 95+</td>
                    <td class="center">4</td>
                    <td class="center"><a href="#"   class="show_hide" rel="#slidingDiv">View</a><br /></td>
                    </tr>
                <div id="slidingDiv">
                <tr>
                    <td>Trident</td>
                    <td>Internet Explorer 4.0</td>
                    <td>Win 95+</td>
                    <td class="center">4</td>
                    <td class="center">X</td>
                     </div>
                </tr>

            </tbody>

        </table>

JavaScript 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);

I am not sure if i am going the right way about this and so any suggestions would be appreciated.

Thanks

Answer 1

Don't wrap the row in a div. Try animating the actual <tr> you wish to show/hide: http://jsfiddle.net/Jgrja/1/