JQuery - Аккордеонный эффект на столе

У меня возникли трудности с реализацией эффекта аккордеона в трех разных таблицах с использованием jQuery, и я мог бы использовать некоторую помощь. Сейчас это работает o.k. Когда я нажимаю на строки заголовка, отображаются следующие строки, но мне нужен какой-то тип анимации. Я также хотел бы, чтобы первое полное шоу было полностью, но я новичок, и это выше моей головы.

Вот мой 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>

И вот мой jQuery:

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

Ответ 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); анимирует отображение элементов, а не просто показывать/скрывать их.

.eq(0).trigger('click'); запускает щелчок по первому заголовку, чтобы содержимое отображалось при загрузке страницы.

Классный эффект для использования - slideUp() и slideDown(), но кажется, что вы не можете использовать их со строками таблицы.

Вот демо: http://jsfiddle.net/Xqk3m/

Update

Вы также можете немного оптимизировать свой код, кешируя селектор .research:

$(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');
});

В этом примере я также удалил все селектора строк в пользу выбора функций (например, использовал .not() вместо :not()). Функции для обхода DOM быстрее, чем установка селекторов в строке.

Вот демо: http://jsfiddle.net/Xqk3m/1/

Update

И последнее, но не менее важное: если вы хотите, чтобы это был аккордеон, где, когда вы открываете один раздел, остальные закрываются, вот решение:

$(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); - важная часть, она выбирает все элементы .accordion, кроме тех, которые были нажаты, а затем находит братьев и сестер всех элементов .accordion, выбранных и скрывающих их.

Вот демо: http://jsfiddle.net/Xqk3m/2/

Ответ 2

я добавил эффект затухания. Проверьте это - 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();
       });
    });

это быстрее - 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");
       });
    });

этот действительно очень медленный - 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");
       });
    });

вы также можете добавить к нему облегчение, например - http://jsfiddle.net/XE6AG/4/.