Load More Button

Ask the Community General Questions
1

I have over 100ish profiles to showcase, i only want to show 4 profiles at a time and add a load more button below to expand the profiles to show more. I have added my css and js code and it is not working? Can you assist in this.

2 Likes
3

Hi there, @Erb_Rose :waving_hand:

We’ve added this code to the Custom CSS field:

.es-load-more-btn {
    display: block;
    margin-top: 10px;
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    background-color: #007bff;
    color: white;
    font-size: 26px;
    margin-left: auto;
    margin-right: auto;
    transition: color 0.2s ease;
    border-radius: 5px;
}

And this script was added to the Custom JS section:

const waitForElement = (selector, root = document) =>
  new Promise((res) => {
    const observer = new MutationObserver(() => {
      const element = root.querySelector(selector);
      if (element) {
        res(element);
        observer.disconnect();
      }
    });

    observer.observe(root, {
      childList: true,
      subtree: true,
    });
  });

waitForElement(".eapp-team-showcase-grid-component").then(() => {
  const containers = document.querySelectorAll(
    ".eapp-team-showcase-grid-component",
  );

  containers.forEach((container) => {
    if (container.dataset.loadMoreInitialized) return;
    container.dataset.loadMoreInitialized = "true";

    const items = container.querySelectorAll(".eapp-team-showcase-grid-item");
    const LIMIT = 4;

    if (items.length <= LIMIT) return;

    for (let i = LIMIT; i < items.length; i++) {
      items[i].style.display = "none";
    }

    const loadMoreBtn = document.createElement("button");
    loadMoreBtn.innerText = "Load more";
    loadMoreBtn.type = "button";
    loadMoreBtn.classList.add("es-load-more-btn");

    loadMoreBtn.addEventListener("click", (e) => {
      e.preventDefault();

      for (let i = LIMIT; i < items.length; i++) {
        items[i].style.display = "";
      }

      loadMoreBtn.remove();
    });

    container.after(loadMoreBtn);
  });
});

Note: Custom JS doesn’t function in the preview mode, so you can check the result right on your website or through the Share Link


Please check your widget and let me know if you like the result :wink:

1 Like
4

We also have a Wishlist request to add the Load More button control to the settings. Feel free to upvote the idea if you’d like to see the feature released :slightly_smiling_face:- Load more button

1 Like
6

Thanks, Max!

How to modify so it only shows 4 more each time, then you need to click the load more button to see more making this action continuous?

2 Likes
7

Sure, we’ve adjusted your script:

const waitForElement = (selector, root = document) =>
  new Promise((res) => {
    const observer = new MutationObserver(() => {
      const element = root.querySelector(selector);
      if (element) {
        res(element);
        observer.disconnect();
      }
    });

    observer.observe(root, {
      childList: true,
      subtree: true,
    });
  });

waitForElement(".eapp-team-showcase-grid-component").then(() => {
  const containers = document.querySelectorAll(
    ".eapp-team-showcase-grid-component",
  );

  containers.forEach((container) => {
    if (container.dataset.loadMoreInitialized) return;
    container.dataset.loadMoreInitialized = "true";

    const items = container.querySelectorAll(".eapp-team-showcase-grid-item");
    const INITIAL_LIMIT = 4;
    const LOAD_BATCH = 4;

    let visibleCount = INITIAL_LIMIT;

    if (items.length <= INITIAL_LIMIT) return;

    for (let i = INITIAL_LIMIT; i < items.length; i++) {
      items[i].style.display = "none";
    }

    const loadMoreBtn = document.createElement("button");
    loadMoreBtn.innerText = "Load more";
    loadMoreBtn.type = "button";
    loadMoreBtn.classList.add("es-load-more-btn");

    loadMoreBtn.addEventListener("click", (e) => {
      e.preventDefault();
      const nextLimit = visibleCount + LOAD_BATCH;

      for (let i = visibleCount; i < nextLimit && i < items.length; i++) {
        items[i].style.display = "";
      }

      visibleCount = nextLimit;
      if (visibleCount >= items.length) {
        loadMoreBtn.remove();
      }
    });

    container.after(loadMoreBtn);
  });
});

Check it out and let me know if it’s working fine :wink:

1 Like
8

Amazing!! Thank you :slight_smile:

2 Likes
9

Awesome, you’re most welcome!

In the meantime, we’d like to invite you to participate in our new contest, where you can win a 6-month extension for your subscription - February Contest: Guess What’s Missing in Our Photo and Win 6 Months FREE! :wrapped_gift:

Check the details and join in :wink:

1 Like