Can CSS be used to hide & show HTML elements based on a button click?

cts
May 17, 2023
236 views
3 votes
4 Answers

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?

.container {
  padding: 16px;
}

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

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

<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>

Answers

- SathiskumarS
- May 17, 2023 at 5:59 pm
- 0 votes
0
You may apply the following
```
Visibility: hidden;
```
When user click that button using javascript you may remove the and display the items.
Login or Signup to reply.

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

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";
})

.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;
}

<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>

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!

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();
});

.container {
  padding: 16px;
}

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

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

<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>

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>

Please signup or login to give your own answer.

Click here to cancel reply.