Comment puis-je masquer les éléments dans ma liste et ajouter une fonctionnalité «Afficher plus»?

Vous pouvez utiliser les sélecteurs gt() et lt() avec :visible très bien ici.

Voici les résultats suivants en cliquant et supprime le lien une fois que tous les éléments sont visibles.

 $('.mydata:gt(4)').hide().last().after( $('<a />').attr('href','#').text('Show more').click(function(){ var a = this; $('.mydata:not(:visible):lt(5)').fadeIn(function(){ if ($('.mydata:not(:visible)').length == 0) $(a).remove(); }); return false; }) ); 

Exemple de travail: http://jsfiddle.net/niklasvh/nTv7D/

Indépendamment de ce que d'autres personnes suggèrent ici, je ne cacherais pas les éléments à l'aide de CSS, mais faites-le dans JS à la place, car si un utilisateur a JS désactivé et que vous cachez les éléments à l'aide de CSS, il ne les verra pas. Cependant, s'il a un JS désactivé, ils ne se cacheront jamais, et ce bouton ne sera pas affiché, etc., donc il y a un retour de noscript complet + les moteurs de recherche n'aiment pas le contenu caché (mais ils ne connaîtront pas son cache si vous Faites-le sur la charge DOM).

Ma solution est ici: jsFiddle .

Vous pouvez mettre ce lien quelque part:

 <a href="#" title="" id="results-show-more">show more</a> 

Et utilisez le code suivant:

 var limit = 5; var per_page = 5; jQuery('#results > div.mydata:gt('+(limit-1)+')').hide(); if (jQuery('#results > div.mydata').length <= limit) { jQuery('#results-show-more').hide(); }; jQuery('#results-show-more').bind('click', function(event){ event.preventDefault(); limit += per_page; jQuery('#results > div.mydata:lt('+(limit)+')').show(); if (jQuery('#results > div.mydata').length <= limit) { jQuery(this).hide(); } }); 

Où limit votre nombre actuel de résultats affichés et per_page est le nombre de résultats affichés avec chaque clic sur "Afficher plus". Le lien disparaît si tous les résultats sont affichés. Voyez comment cela fonctionne sur jsFiddle .

Vous pouvez créer une classe CSS comme:

 .hiddenData { display: none } 

Et l'attacher à toute quantité de divs qui dépasse 5.

Ensuite, faites les gestionnaires pour ajouter / supprimer cette classe à partir de la quantité nécessaire de divs.

JQuery pour la suppression de classe:

 $(".hiddenData").removeClass("hiddenData") 

Créez une classe avec quelque chose comme:

 .hidden_class{ display: none; } 

Ajoutez cette classe à toutes les mydata div que vous ne voulez pas voir. Lorsque l'utilisateur clique sur le bouton, supprimez-le des 5 divs suivants.

Répétez chaque fois que l'utilisateur clique sur le bouton "Lire plus"

Cela devrait fonctionner … Laissez-moi savoir comment ça se passe

 <script type="text/javascript"> function ShowHide(id) { $("#" + id).toggle(); } </script> <div id="results"> <div class="mydata">data 1</div> <div class="mydata">data 2</div> <div class="mydata">data 3</div> <div class="mydata">data 4</div> <div class="mydata">data 5</div> <div style="clear:both" onclick="ShowHide('grp6')">More</div> <div id="grp6" style="display:none"> <div class="mydata">data 6</div> <div class="mydata">data 7</div> <div class="mydata">data 8</div> <div class="mydata">data 9</div> <div class="mydata">data 10</div> </div> <div style="clear:both" onclick="ShowHide('grp11')">More</div> <div id="grp11" style="display:none"> <div class="mydata">data 11</div> <div class="mydata">data 12</div> <div class="mydata">data 13</div> <div class="mydata">data 14</div> <div class="mydata">data 15</div> </div> </div> 

Dans votre forloop, vous devez également ajouter ce conteneur caché divs

 <div style="clear:both" onclick="ShowHide('grp6')">More</div> <div id="grp6" style="display:none"> 

Vous avez l'idée.

Vous avez ici:

  <style> /*This hides all items initially*/ .mydata{ display: none; } </style> 

Maintenant, le script

  <script> var currentPage = 1; //Global var that stores the current page var itemsPerPage = 5; //This function shows a specific 'page' function showPage(page){ $("#results .mydata").each(function(i, elem){ if(i >= (page-1)*itemsPerPage && i < page*itemsPerPage) //If item is in page, show it $(this).show(); else $(this).hide(); }); $("#currentPage").text(currentPage); } $(document).ready(function(){ showPage(currentPage); $("#next").click(function(){ showPage(++currentPage); }); $("#prev").click(function(){ showPage(--currentPage); }); }); </script> 

Et un échantillon html:

  <div id="results"> <div class="mydata">data 1</div> <div class="mydata">data 2</div> <div class="mydata">data 3</div> <div class="mydata">data 4</div> <div class="mydata">data 5</div> <div class="mydata">data 6</div> <div class="mydata">data 7</div> <div class="mydata">data 8</div> <div class="mydata">data 9</div> <div class="mydata">data 10</div> <div class="mydata">data 11</div> <div class="mydata">data 12</div> </div> <a href="javascript:void(0)" id="prev">Previous</a> <span id="currentPage"></span> <a href="javascript:void(0)" id="next">Next</a> 

La seule chose qui reste est de valider pour ne pas aller à une page inférieure à 1 et supérieure au total. Mais ce sera facile.

EDIT : Ici vous l'avez en cours d'exécution: http://jsfiddle.net/U8Q4Z/

J'espère que cela t'aides. À votre santé.