• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

IntelyBlog

A blog site that is intelligent

  • Hosting
  • jQuery
  • Programming

css

How to create load more function with jQuery

September 5, 2021

Post Views: 9

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

Filed Under: jQuery Tagged With: css, html, jquery, slice

Primary Sidebar

Recent Posts

  • How to convert any full URL path to relative to WordPress installation (root)
  • How to write if else statement in a single line (compact if else statement) using PHP
  • How to programmatically add a WordPress admin user using functions.php
  • How to check if a file exists on a remote server using CURL
  • How to create WhatsApp share button in HTML

Recent Comments

No comments to show.

Archives

  • April 2022
  • February 2022
  • September 2021
  • August 2021

Categories

  • Hosting
  • jQuery
  • PHP
  • WhatsApp
  • WordPress

Content

Our team will teach you the art of writing audience-focused content that will help you achieve the success you truly deserve.

Learn more about content.

Copyright © 2021 IntelyBlog

  • html
  • jquery
  • https
  • css
  • slice
  • WhatsApp