web-dev-qa-db-fra.com

jQuery - Effet d'accordéon sur une table

J'ai du mal à implémenter un effet accordéon sur trois tables différentes à l'aide de jQuery et je pourrais avoir besoin d'aide. En ce moment, ça marche bien. Lorsque je clique sur les lignes d'en-tête, les lignes suivantes s'affichent, mais j'aimerais un certain type d'animation. J'aimerais aussi avoir le premier spectacle de table complètement, mais je suis un débutant et c'est au-dessus de ma tête.

Voici mon 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>

Et voici ma jQuery:

$(function() {
  $(".research tr:not(.accordion)").hide();
  $(".research tr:first-child").show();
  $(".research tr.accordion").click(function(){
  $(this).nextAll("tr").toggle();
    });
  });
jqueryjquery-ui-accordion
25
user965879
$(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); anime l'affichage des éléments plutôt que de simplement les afficher/les masquer.

.eq(0).trigger('click'); déclenche un clic sur le premier en-tête pour que son contenu soit affiché lors du chargement de la page.

Un effet intéressant à utiliser est slideUp() et slideDown() mais il semble que vous ne pouvez pas les utiliser avec des lignes de tableau.

Voici une démo: http://jsfiddle.net/Xqk3m/

Mise à jour

Vous pouvez également optimiser un peu votre code en mettant en cache le sélecteur .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');
});

Dans cet exemple, j'ai également supprimé tous les sélecteurs de chaîne au profit des sélections de fonctions (par exemple, utilisé .not() au lieu de :not()). Les fonctions de traversée DOM sont plus rapides que de placer des sélecteurs dans une chaîne.

Voici une démo: http://jsfiddle.net/Xqk3m/1/

Mise à jour

Et enfin, si vous voulez que ce soit un accordéon, lorsque vous ouvrez une section, le reste se ferme, voici une 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); est la partie importante, il sélectionne tous les éléments .accordion à l'exception de celui sur lequel on a cliqué, puis trouve les frères et sœurs de tous les éléments .accordion sélectionnés et les masque.

Voici une démo: http://jsfiddle.net/Xqk3m/2/

36
Jasper

j'ai ajouté un effet de fondu. Vérifiez-le - 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();
       });
    });

celui-ci est plus rapide - 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");
       });
    });

celui-ci est vraiment très lent - 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");
       });
    });

vous pouvez également y ajouter un assouplissement par exemple - http://jsfiddle.net/XE6AG/4/ .

2
theliberalsurfer