scratch - jQuery-Efecto de acordeón sobre una mesa

jquery accordion collapse

Question

Estoy teniendo dificultades para implementar un efecto de acordeón en tres tablas diferentes utilizando jQuery y podría necesitar ayuda. Ahora mismo funciona bien. Cuando hago clic en las filas del encabezado, se muestran las filas siguientes, pero me gustaría algún tipo de animación. También me gustaría tener el primer show de mesa completamente, pero soy un novato y esto está por encima de mi cabeza.

Aquí está mi 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>

Y aquí está mi jQuery:

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

Answer 1

He añadido un efecto de desvanecimiento. Compruébalo - 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();
       });
    });

este es más rápido - 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");
       });
    });

este es realmente muy lento - 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");
       });
    });

También podría agregarle una ampliación, por ejemplo, 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); anima la visualización de los elementos en lugar de solo mostrarlos / esconderlos.

.eq(0).trigger(''click''); activa un clic en el primer encabezado para que se muestre su contenido cuando se cargue la página.

Un efecto genial para usar es slideUp() y slideDown() pero parece que no se pueden usar con las filas de la tabla.

Aquí hay una demostración: http://jsfiddle.net/Xqk3m/

Actualizar

También puede optimizar su código un poco almacenando en caché el selector de .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'');
});

En este ejemplo, también eliminé todos los selectores de cadena a favor de las selecciones de funciones (por ejemplo, use .not() lugar de :not() ). Las funciones para el recorrido de DOM son más rápidas que poner selectores en una cadena.

Aquí hay una demostración: http://jsfiddle.net/Xqk3m/1/

Actualizar

Y por último, pero no menos importante, si desea que sea un acordeón donde, cuando abra una sección, se cierre el resto, aquí tiene una solución:

$(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); Es la parte importante, selecciona todos los elementos de .accordion , excepto el que hizo clic, luego encuentra a los hermanos de todos los elementos de .accordion seleccionados y los oculta.

Aquí hay una demostración: http://jsfiddle.net/Xqk3m/2/