Hide and show HTML elements using CSS based on button click

Using vanilla HTML, Javascript and preferably just pure CSS I'm trying to implement a feature whereby when a user clicks a button, the next 4 elements are displayed to the user.

Due to limitations in the snippet, the styles aren't quite reflective - as I've implemented a grid system, so there's actually 4 items in a row (they're just horizontal in the above).

By default I want to show just 4 items, but when the user selects "load more", then the next 4 are displayed & so on. The button should always remain just below the last visible element.

Can anyone guide or reference an approach that would achieve this result?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.container {
  padding: 16px;
}

.items-container {
  flex-direction: row;
  display: flex;
  gap: 16px;
}

.item {
  flex: 0 0 auto;
  width: 25%;
  background-color: lightblue;
  height: 320px;
}

<!-- language: lang-html -->

<div class="container">
  <div class="items-container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <p>Showing 4 of 10</p>
  <button>
    Load more
  </button>
</div>

<!-- end snippet -->

Is this what you are looking for? If you are only showing the 1st 4 elements at the start then the rest needs to be hidden until you press the button.

Once you press it, loop thru all hidden elements and remove the class which hiddes those elements d-none in this example and change your text from Showing 4 of 8 to Showing 8 of 8 with textContent

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const load = document.getElementById("load");
const divs = document.getElementsByClassName("d-none");
const showing = document.getElementById("showing");
load.addEventListener("click", function(){
	Array.from(divs).forEach((ele) => {
    // Do stuff here
    ele.classList.remove("d-none");
  });
  showing.textContent = "Showing 8 of 8";
})

<!-- language: lang-css -->

.container {
  padding: 16px;
}

.items-container {
  flex-direction: row;
  display: flex;
  gap: 16px;
}

.item {
  flex: 0 0 auto;
  width: 25%;
  background-color: lightblue;
  height: 320px;
}

.d-none {
  display: none;
}

<!-- language: lang-html -->

<div class="container">
  <div class="items-container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item d-none"></div>
    <div class="item d-none"></div>
    <div class="item d-none"></div>
    <div class="item d-none"></div>
  </div>
  <p id="showing">Showing 4 of 8</p>
  <button id="load">
    Load more
  </button>
</div>

<!-- end snippet -->

Is this what you are trying to do? Explanation: updateCount writes the current count to the p element. updateItems changes the display property of your items based on the current value of count. The event listener on the button increases the value of the current count by 4 and then calls the updateItems function, which updates the styles based on the current count and then calls the updateCount function to write the current page to the p. I hope this helps!

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const items = Array.from(document.querySelectorAll('.item'));
let count = 4;

function updateCount() {
  document.querySelector('p').innerHTML = 'Showing ' + count + ' of ' + items.length;
}

function updateItems() {
  for (let index = 0; index < count; index++) {
    items[index].style.display = '';
  }

  for (let index = count; index < items.length; index++) {
    items[index].style.display = 'none';
  }

  updateCount();
}

updateItems();

document.querySelector('button').addEventListener('click', () => {
  count += 4;
  count = count > items.length ? items.length : count;
  updateItems();
});

<!-- language: lang-css -->

.container {
  padding: 16px;
}

.items-container {
  flex-direction: row;
  display: flex;
  gap: 16px;
}

.item {
  flex: 0 0 auto;
  width: 25%;
  background-color: lightblue;
  height: 320px;
}

<!-- language: lang-html -->

<div class="container">
  <div class="items-container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <p></p>
  <button>
    Load more
  </button>
</div>

<!-- end snippet -->

I suppose you already have the elements loaded, if not, the solution I’m going to give you won’t work completely:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Filter Testing</title>
<style>
.container {
padding: 16px;
}
.items-container {
flex-direction: row;
display: flex;
gap: 16px;
}
.item {
flex: 0 0 auto;
width: 25%;
background-color: lightblue;
height: 320px;
}
.hidden-item {
display: 'none';
}
</style>
</head>
<body>
<div class="container">
<div class="items-container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="hidden-item"></div>
<div class="hidden-item"></div>
<div class="hidden-item"></div>
<div class="hidden-item"></div>
<div class="hidden-item"></div>
<div class="hidden-item"></div>
<div class="hidden-item"></div>
<div class="hidden-item"></div>
<div class="hidden-item"></div>
<div class="hidden-item"></div>
<div class="hidden-item"></div>
<div class="hidden-item"></div>
</div>
<p>Showing 4 of 10</p>
<button id="loadMoreButton">
Load more
</button>
</div>
<script>
//Let save the button reference 
let loadMoreButton = document.getElementById('loadMoreButton');
// Save the hidden items
//Create an array to iterate, because the querySelector return a node list
function loadMoreItems() {
let hiddenItems = document.querySelectorAll('.hidden-item');
let displayedItems = document.querySelectorAll('.item');
Array.from(hiddenItems).forEach(function (item, index) {
//Lets load just 4 more items
//Remember the array init count in 0, so 3 is the 4 element loaded
if (index < 4) {
//Lets remove the class to hide the element and add the class tho dsiplayed elements
item.classList.remove('hidden-item');
item.classList.add('item');
}
});
}
// Add the loadMoreItems to button
loadMoreButton.addEventListener('click', loadMoreItems);
</script>
</body>
</html>