title: jQuery - Accordion Effect on a Table
body: <p>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.</p>
  
  <p>Here is my HTML.</p>
  
  <pre><code>&lt;table class="research"&gt;
                  &lt;tbody&gt;
                      &lt;tr class="accordion"&gt;
                          &lt;td colspan="3"&gt;This is the header&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Research&lt;/td&gt;
                          &lt;td&gt;Description&lt;/td&gt;
                          &lt;td&gt;Partner&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/td&gt;
                          &lt;td&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/td&gt;
                          &lt;td&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
  
              &lt;table class="research"&gt;
                  &lt;tbody&gt;
                      &lt;tr class="accordion"&gt;
                          &lt;td colspan="3"&gt;This is the header&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Research&lt;/td&gt;
                          &lt;td&gt;Description&lt;/td&gt;
                          &lt;td&gt;Partner&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/td&gt;
                          &lt;td&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/td&gt;
                          &lt;td&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
  
              &lt;table class="research"&gt;
                  &lt;tbody&gt;
                      &lt;tr class="accordion"&gt;
                          &lt;td colspan="3"&gt;This is the header&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Research&lt;/td&gt;
                          &lt;td&gt;Description&lt;/td&gt;
                          &lt;td&gt;Partner&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/td&gt;
                          &lt;td&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/td&gt;
                          &lt;td&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
  </code></pre>
  
  <p>And here is my jQuery:</p>
  
  <pre><code>$(function() {
    $(".research tr:not(.accordion)").hide();
    $(".research tr:first-child").show();
    $(".research tr.accordion").click(function(){
    $(this).nextAll("tr").toggle();
      });
    });
  </code></pre>