Load more every 6 div

Question

Hello actually how to make a 'Load more' button each 6 div with jquery ?

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

<div>5</div>

<div>6</div>

<a href="#" onclick="" > Load More .. </a>

and then show the rest div 7, 8, 9, etc

thanks

Answer 1

Use .append() in JQuery :

Define a function to be called on button click and in the function append divs like this :

function add(i) { $( "#container" ).append( "<div>"+i+"</div>" ); $( "#container" ).append( "<div>"+(i+1)+"</div>" ); $( "#container" ).append( "<div>"+(i+2)+"</div>" ); }

Answer 2

Approach 1: If you have fixed number of Divs in your HTML and initially show first 6 and then show rest of them by clicking on button.

<div id="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
    <div id="containerHidden" style="display: none">
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
    <a href="#" id="loadMore">Load More .. </a>

    <script type="text/javascript" language="javascript">
        $('#loadMore').click(function () {
            $('#containerHidden').show();
        });
    </script>

Approach 2: If you want to append N number of divs dynamically every time by clicking on the button.

<div id="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

<a href="#" id="loadMore">Load More .. </a>

<script type="text/javascript" language="javascript">
    $('#loadMore').click(function () {
        for (var i = 0; i < 3; i++) {
            var counter = parseInt($('#container div').length);
            counter++;
            $('#container').append('<div>' + counter + '</div');
        }
    });
</script>