Simple and efficient load more button JS

Question

I have a box wrapper with boxes of content inside of it and they're displayed as a grid. All I want is a way to show, let's say, 6 boxes at the start and then every time someone clicks the load more button it shows another 6 boxes.

I'd like to accomplish this without repeating a lot of code (so creating containers for each 6 boxes will not solve it).

I will constantly add new boxes so I don't really have a limit for their number. Initially I wanted an infinite loader but I don't have the knowledge to create one!

/*Box Wrapper Design*/

.boxWrapper {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 2em;
  grid-row-gap: 5em;
  margin-top: 120px;
}

.boxWrapper .box {
  background-color: rgb(241, 240, 240);
  width: 300px;
  height: 355px;
  margin: 0 auto;
  text-align: center;
}

.boxWrapper .box img {
  width: 100%;
  height: 84.5%;
}

.boxWrapper .box a {
  font-size: 22px;
  font-weight: normal;
}

.boxWrapper .box p {
  font-family: "Lato", sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: rgb(22, 22, 22);
}

<div class="boxWrapper">
  <div class="box" id="box1">
    <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
      <p>Character</p>
    </a>
  </div>
  <div class="box" id="box2">
    <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
      <p>Character</p>
    </a>
  </div>
  <div class="box" id="box3">
    <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
      <p>Character</p>
    </a>
  </div>
  <div class="box" id="box4">
    <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
      <p>Character</p>
    </a>
  </div>
  <div class="box" id="box5">
    <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
      <p>Character</p>
    </a>
  </div>
  <div class="box" id="box6">
    <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
      <p>Character</p>
    </a>
  </div>

  <div class="box" id="box7">
    <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
      <p>Character</p>
    </a>
  </div>
  <div class="box" id="box8">
    <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
      <p>Character</p>
    </a>
  </div>
  <div class="box" id="box9">
    <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
      <p>Character</p>
    </a>
  </div>
  <div class="box" id="box10">
    <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
      <p>Character</p>
    </a>
  </div>
  <div class="box" id="box11">
    <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
      <p>Character</p>
    </a>
  </div>
  <div class="box" id="box12">
    <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
      <p>Character</p>
    </a>
  </div>
</div>

<!--Load More-->
<div class="loadMore">
  <a href="#" class="loadMore-btn">Load More</a>
</div>

Since initally you wanted an infinite loader, you could look at the scroll postion of the page. If its far down, you load more stuff. https://stackoverflow.com/questions/2481350/how-to-get-scrollbar-position-with-javascript — The Fool, Aug 10 '21 at 18:12

score 0 · Answer 1 · answered Aug 10 '21 at 18:30

Here is a really simple method and you would have to modify it to suit your needs, but this is the most basic way.

// Check for scroll event on window
window.addEventListener('scroll', () => {
  // Fire addon if the user is at end
  if (atEnd()) {
    let boxes = document.querySelectorAll('.box')
    // Get the last boxes' id
    let last = boxes[boxes.length - 1].id
    last = parseInt(last.split('box')[1])
    // Generate 6 divs with some code and a new id
    for (let i = last + 1; i < last + 1 + 6; i++) {
      document.querySelector('.boxWrapper').innerHTML += `
   <div class="box" id="box${i}">
      <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png"/>
      <p>Character</p>
      </a>
  </div>
 `
    }
  }
})


function atEnd() {
  var c = [document.scrollingElement.scrollHeight, document.body.scrollHeight, document.body.offsetHeight].sort(function(a, b) {
    return b - a
  }) // select longest candidate for scrollable length
  return (window.innerHeight + window.scrollY + 2 >= c[0]) // compare with scroll position + some give
}

/*Box Wrapper Design*/

.boxWrapper {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 2em;
  grid-row-gap: 5em;
  margin-top: 120px;
}

.boxWrapper .box {
  background-color: rgb(241, 240, 240);
  width: 300px;
  height: 355px;
  margin: 0 auto;
  text-align: center;
}

.boxWrapper .box img {
  width: 100%;
  height: 84.5%;
}

.boxWrapper .box a {
  font-size: 22px;
  font-weight: normal;
}

.boxWrapper .box p {
  font-family: "Lato", sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: rgb(22, 22, 22);
}

<div class="boxWrapper">
  <div class="box" id="box1">
    <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
      <p>Character</p>
    </a>
  </div>
  <div class="box" id="box2">
    <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
      <p>Character</p>
    </a>
  </div>
  <div class="box" id="box3">
    <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
      <p>Character</p>
    </a>
  </div>
  <div class="box" id="box4">
    <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
      <p>Character</p>
    </a>
  </div>
  <div class="box" id="box5">
    <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
      <p>Character</p>
    </a>
  </div>
  <div class="box" id="box6">
    <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
      <p>Character</p>
    </a>
  </div>

  <div class="box" id="box7">
    <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
      <p>Character</p>
    </a>
  </div>
  <div class="box" id="box8">
    <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
      <p>Character</p>
    </a>
  </div>
  <div class="box" id="box9">
    <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
      <p>Character</p>
    </a>
  </div>
  <div class="box" id="box10">
    <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
      <p>Character</p>
    </a>
  </div>
  <div class="box" id="box11">
    <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
      <p>Character</p>
    </a>
  </div>
  <div class="box" id="box12">
    <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png" />
      <p>Character</p>
    </a>
  </div>
</div>

<!--Load More-->
<div class="loadMore">
  <a class="loadMore-btn">Load More</a>
</div>

I understand this way, but the part where you generate 6 new divs don't really match my needs, I'll always create the boxes in the html because they differ in many aspects (in the example they don't). The perfect way would be slicing the total amount of boxes (the divs in the html) and divide them in groups of 6, displaying each group as the user scrolls. — hugoCurto, Aug 10 '21 at 18:48

Simple and efficient load more button JS

1 Answers1