Posts

How to create load more function with jQuery

/in
Post Views: 10

Step 1: Create the html containers that needed to be used for the load more function.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>CSS with Superpowers</title>
    <link rel="stylesheet" href="public/css/style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>

<body>
    <header>
        <h1>JQuery Load more</h1>
    </header>

    <div class="box-group">
        <div class="box box-1">Card 1</div>
        <div class="box box-2">Card 2</div>

        <div class="box box-3">Card 3</div>
    </div>

    <div class="box-group">
        <div class="box box-4">card 4</div>

        <div class="box box-5">Card 5</div>

        <div class="box box-6">Card 6</div>
    </div>

    <div class="box-group">
        <div class="box box-1">Card 7</div>

        <div class="box box-2">Card 8</div>

        <div class="box box-3">Card 9</div>
    </div>

    <div class="box-group">
        <div class="box box-4">card 10</div>

        <div class="box box-5">Card 11</div>

        <div class="box box-6">Card 12</div>
    </div>
</body>

</html>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

header h1 {
  text-align: center;
}

/* 
* 
* call to action boxes 
*
*/
.box-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.box-group .box {
  padding: 50px;
  margin: 10px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  font-size: 24px;
  text-transform: uppercase;
  -webkit-box-shadow: 5px 5px 5px #ccc;
          box-shadow: 5px 5px 5px #ccc;
  font-weight: 700;
}

.box-group .box-1 {
  background-color: #CCCCCC;
}

.box-group .box-2 {
  background-color: #FB8C00;
}

.box-group .box-3 {
  background-color: #F46524;
}

.box-group .box-4 {
  background-color: #6AA84F;
}

.box-group .box-5 {
  background-color: #6D9EEB;
}

.box-group .box-6 {
  background-color: #8E7CC3;
}

.load-more-container button {
  padding: 15px 10px;
  width: 200px;
  border: none;
  -webkit-box-shadow: 0px 0px 5px #ccc;
          box-shadow: 0px 0px 5px #ccc;
  display: block;
  margin: 15px auto;
  background-color: #F46524;
  color: #ffffff;
  text-transform: uppercase;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.load-more-container button:hover {
  background-color: #ffffff;
  color: #F46524;
  cursor: pointer;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

Preview

Step 2: Make sure the containers have a wrapper to such as below mentioned example.

    <div class="load-more-container">
        <div class="box-group">
            <div class="box box-1">Card 1</div>

            <div class="box box-2">Card 2</div>

            <div class="box box-3">Card 3</div>
        </div>
    </div>

Step 3: Connect jQuery CDN and a JS file to run the load script.

<head>
    <title>CSS with Superpowers</title>
    <link rel="stylesheet" href="public/css/style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="app.js"></script>
</head>

Step 4: Write the below script in the app.js file.
jQuery slice function is used to hide and show the containers. Here in this script the limit is set to 2. It can vary depending on the number of containers.

jQuery

$(function() {
    /* Store page load more functions */
    $(".box-group").hide();
    $(".box-group").slice(0, 2).show();

    $(".load-more-container").append('<p id="load-more-button-container"><button type="button" id="load-more-button">Load More</button></p>');

    $("#load-more-button").click(function() {
        $(".box-group").show(500);
        $("#load-more-button-container").hide();
    });
});

Preview

HTML preview after connecting the load more script