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 h

Answer 1

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/.

Answer 2

$(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/