Load More Content with Javascript Ajax Include

Load More Content with Javascript Ajax Include

TextBox 1

TextBox 2

TextBox 3

TextBox 4

TextBox 5

TextBox 6

TextBox 7

TextBox 8

TextBox 9

TextBox 10

TextBox 11

TextBox 12

TextBox 13

TextBox 14

TextBox 15

TextBox 16

➤ CSS (Cascading Style Sheets)

<style>
*, body {
    margin: 0;
    padding: 0;
}
.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
}
.content {
    width: 16.25%;
    color: #fff;
    font-size: 24px;
    line-height: 100px; /* centering text just for view */
    text-align: center;
    background-color: grey;
    margin: 2px;
    /*border: 1px solid lightgrey;*/
    display: none;
}
#loadMore {
    width: 200px;
    color: #fff;
    display: block;
    text-align: center;
    margin: 20px auto;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    background-color: blue;
    transition: .3s;
}
#loadMore:hover {
    color: blue;
    background-color: #fff;
    border: 1px solid blue;
    text-decoration: none;
}
.noContent {
    color: #000 !important;
    background-color: transparent !important;
    pointer-events: none;
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 800px) {
    .content {
      width: 32.5%;
    }
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 400px) {
    .content {
      width: 48.5%;
    }
}

</style>

➤ HTML Code

<div class="container">
<div class="flex">
    <div class="content">Box 1</div>
    <div class="content">Box 2</div>
    <div class="content">Box 3</div>
    <div class="content">Box 4</div>
    <div class="content">Box 5</div>
    <div class="content">Box 6</div>
    <div class="content">Box 7</div>
    <div class="content">Box 8</div>
    <div class="content">Box 9</div>
    <div class="content">Box 10</div>
    <div class="content">Box 11</div>
    <div class="content">Box 12</div>
    <div class="content">Box 13</div>
    <div class="content">Box 14</div>
    <div class="content">Box 15</div>
    <div class="content">Box 16</div>
</div>

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

➤ Javascripte Code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".content").slice(0, 6).show();
    $("#loadMore").on("click", function(e){
      e.preventDefault();
      $(".content:hidden").slice(0, 6).slideDown();
      if($(".content:hidden").length == 0) {
        $("#loadMore").text("No More").addClass("noContent");
      }
    });

})
</script>

ความคิดเห็น