How can I hide the items in my list and add the show more feature?

Question

I use javascript to create a list of results. I have a for loop that iterates over some data and creates a div mydata, and adds this to the result div. Let it pretend it looks something like this:

<div id="results"> <div class="mydata">data 1</div> <div class="mydata">data 2</div> ... <div class="mydata">data 20</div> </div> 

What I want to do is display only 5 results at a time , and if the user wants to see more, they can click show the next 5 or show more (or something like that). Any ideas?

To clarify, every time the user clicks "show more", I want to "display" the following 5 elements, not ALL other elements. Thus, each click shows more elements until all are displayed.

Answer 1

You can use the gt() and lt() selector along with :visible here.

The following 5 results are shown below when you click and delete a link after viewing all the elements.

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

working example: http://jsfiddle.net/niklasvh/nTv7D/

Regardless of what other people suggest, I would not hide elements with CSS, but instead did it in JS, because if the user has JS disabled and you hide elements with CSS, he will not get them visible. However, if it is disabled by JS, they will never be hidden, and this button will not appear, etc. Therefore, it has a full noscript reserve in place + search engines do not like hidden content (but they will not know its hidden if you do this when loading the DOM).

Answer 2

My solution here is: jsFiddle .

You can put this link somewhere:

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

and use the following code:

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

where limit is the current number of displayed results, and per_page is the number of results shown each time the "show more" button is clicked. The link disappears if all the results are displayed. See how this works in jsFiddle .

Answer 3

You can create a CSS class, for example:

 .hiddenData { display: none } 

and attach it to any number of divs that exceed 5.

After that, create handlers to add / remove this class from the required number of divs.

jQuery to remove a class:

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

Answer 4

Create a class with something like:

 .hidden_class{ display: none; } 

Add this class to the entire div mydata that you don't want to see. when the user clicks on the button, remove it from the next 5 divs.

repeat every time the user clicks the "read more" button

Answer 5

This should work ... Let me know how this happens.

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

In your forloop you also need to add a hidden container divs

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

You get the idea.

Answer 6

Here you have:

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

Now 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> 

And the html sample:

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

It remains only to check whether the page is lower than 1 and higher than the total. But it will be easy.

EDIT : here you run: http://jsfiddle.net/U8Q4Z/

Hope this helps. Greetings.