Show more div on click load more

On click, loading more div according to the count we are giving in html

by santhosh lanka

HTML

<div id="component">
    <div class="funding" load = '5' increment = '3'>Component 1</div>
    <div class="funding" load = '5' increment = '3'>Component 2</div>
    <div class="funding" load = '5' increment = '3'>Component 3</div>
    <div class="funding" load = '5' increment = '3'>Component 4</div>
    <div class="funding" load = '5' increment = '3'>Component 5</div>
    <div class="funding" load = '5' increment = '3'>Component 6</div>
    <div class="funding" load = '5' increment = '3'>Component 7</div>
    <div class="funding" load = '5' increment = '3'>Component 8</div>
    <div class="funding" load = '5' increment = '3'>Component 9</div>
    <div class="funding" load = '5' increment = '3'>Component 10</div>
    <div class="funding" load = '5' increment = '3'>Component 11</div>
    <div class="funding" load = '5' increment = '3'>Component 12</div>
    <div class="funding" load = '5' increment = '3'>Component 13</div>
    <div class="funding" load = '5' increment = '3'>Component 14</div>
    <div class="funding" load = '5' increment = '3'>Component 15</div>
    <div class="funding" load = '5' increment = '3'>Component 16</div>
    <div class="funding" load = '5' increment = '3'>Component 17</div>
    <div class="funding" load = '5' increment = '3'>Component 18</div>
    <div class="funding" load = '5' increment = '3'>Component 19</div>
</div><br/>
<div href="#" id="load-more">Load More </div>

CSS

#load-more{
  color: red;
  text-decoration: underline;
  cursor: pointer;
}

JavaScript

var limit = parseInt($('.funding').attr('load'), 10);
var per_page =  parseInt($('.funding').attr('increment'), 10);
$('#component > .funding:gt('+(limit-1)+')').hide();
if ($('#component > .funding').length <= limit) {
    $('#load-more').hide();
}

$('#load-more').bind('click', function(event){
    event.preventDefault();
    limit += per_page;
    $('#component > .funding:lt('+(limit)+')').show();
    if ($('#component > .funding').length <= limit) {
        $(this).hide();
    }
});