load more2

by lovromar

HTML

<div id="results">
    <div class="mydata">item 1</div>
    <div class="mydata">item 2</div>
    <div class="mydata">item 3</div>
    <div class="mydata">item 4</div>
    <div class="mydata">item 5</div>
    <div class="mydata">item 6</div>
    <div class="mydata">item 7</div>
    <div class="mydata">item 8</div>
    <div class="mydata">item 9</div>
    <div class="mydata">item 10</div>
    <div class="mydata">item 11</div>
    <div class="mydata">item 12</div>
    <div class="mydata">item 13</div>
    <div class="mydata">item 14</div>
    <div class="mydata">item 15</div>
    <div class="mydata">item 16</div>
    <div class="mydata">item 17</div>
    <div class="mydata">item 18</div>
    <div class="mydata">item 19</div>
</div>
<a href="#" title="" id="results-show-more">show more</a>

JavaScript

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