jQuery - Accordion Effect on a Table

Question

I'm having difficulty implementing an accordion effect on three different tables using jQuery and I could use some assistance. Right now it works o.k. When I click on the header rows the subsequent rows show, but I'd like some type of animation. I'd also like to have the first table show completely, but I'm a newbie and this is above my head.

Here is my HTML.

<table class="research">
                <tbody>
                    <tr class="accordion">
                        <td colspan="3">This is the header</td>
                    </tr>
                    <tr>
                        <td>Research</td>
                        <td>Description</td>
                        <td>Partner</td>
                    </tr>
                    <tr>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                    </tr>
                </tbody>
            </table>

            <table class="research">
                <tbody>
                    <tr class="accordion">
                        <td colspan="3">This is the header</td>
                    </tr>
                    <tr>
                        <td>Research</td>
                        <td>Description</td>
                        <td>Partner</td>
                    </tr>
                    <tr>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                    </tr>
                </tbody>
            </table>

            <table class="research">
                <tbody>
                    <tr class="accordion">
                        <td colspan="3">This is the header</td>
                    </tr>
                    <tr>
                        <td>Research</td>
                        <td>Description</td>
                        <td>Partner</td>
                    </tr>
                    <tr>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                    </tr>
                </tbody>
            </table>

And here is my jQuery:

$(function() {
  $(".research tr:not(.accordion)").hide();
  $(".research tr:first-child").show();
  $(".research tr.accordion").click(function(){
  $(this).nextAll("tr").toggle();
    });
  });

Answer 1

$(function() {
  $(".research tr:not(.accordion)").hide();
  $(".research tr:first-child").show();
    
  $(".research tr.accordion").click(function(){
      $(this).nextAll("tr").fadeToggle(500);
  }).eq(0).trigger('click');
});

.fadeToggle(500); animates the display of the elements rather than just showimg/hiding them.

.eq(0).trigger('click'); triggers a click on the first header so that it's content will be shown when the page loads.

A cool effect to use is slideUp() and slideDown() but it appears as though you can't use them with table rows.

Here is a demo: http://jsfiddle.net/Xqk3m/

Update

You can also optimize your code a bit by caching the .research selector:

$(function() {
    var $research = $('.research');
    $research.find("tr").not('.accordion').hide();
    $research.find("tr").eq(0).show();
    
    $research.find(".accordion").click(function(){
        $(this).siblings().fadeToggle(500);
    }).eq(0).trigger('click');
});

In this example I also removed all the string selectors in favor of function selections (e.g. used .not() instead of :not()). The functions for DOM traversal are faster than putting selectors in a string.

Here is a demo: http://jsfiddle.net/Xqk3m/1/

Update

And last but not least, if you want it to be an accordion where when you open one section the rest close, here's a solution:

$(function() {
    var $research = $('.research');
    $research.find("tr").not('.accordion').hide();
    $research.find("tr").eq(0).show();
    
    $research.find(".accordion").click(function(){
        $research.find('.accordion').not(this).siblings().fadeOut(500);
        $(this).siblings().fadeToggle(500);
    }).eq(0).trigger('click');
});

$research.find('.accordion').not(this).siblings().fadeOut(500); is the important part, it selects all the .accordion elements except for the one that was clicked, then finds the siblings of all the .accordion elements selected and hides them.

Here is a demo: http://jsfiddle.net/Xqk3m/2/

Answer 2

i added a fade effect. Check it - http://jsfiddle.net/XE6AG/1/

    $(function() {
      $(".research tr:not(.accordion)").hide();
      $(".research tr:first-child").show();
      $(".research tr.accordion").click(function(){
      $(this).nextAll("tr").fadeToggle();
       });
    });

this one is faster - http://jsfiddle.net/XE6AG/2/

    //this is fast
    $(function() {
      $(".research tr:not(.accordion)").hide();
      $(".research tr:first-child").show();
      $(".research tr.accordion").click(function(){
      $(this).nextAll("tr").fadeToggle("fast");
       });
    });

this one is really really slow - http://jsfiddle.net/XE6AG/3/

    //this is fast
    $(function() {
      $(".research tr:not(.accordion)").hide();
      $(".research tr:first-child").show();
      $(".research tr.accordion").click(function(){
      $(this).nextAll("tr").fadeToggle("fast");
       });
    });

you could also add easing to it for example - http://jsfiddle.net/XE6AG/4/.