How to add see more button to multiple UL if LI length exceed than 5?

JavaScript
1

Hello guys, I am working on a project and stuck at a point. Please help me out.

There are multiples UL and each UL have some id, they all are static and for each UL there will be a See more button, by default the See More button will be hidden and if List length exceed with 5 the button will show.

With help of Jquery I have get the count of each UL li, but how to show the see more button.

here is a structure
HTML

 <div class="filter-list">
    <ul id="someidone">
      <li>List 1</li>
      <li>List 2</li>
      <li>List 3</li>
      <li>List 4</li>
      <li>List 5</li>
      <li>List 6</li>
      <li>List 7</li>
      <li>List 8</li>
     <ul>
<label class="more">See more...</label>
</div>

 <div class="filter-list">
    <ul id="someidtwo">
      <li>List 1</li>
      <li>List 2</li>
      <li>List 3</li>
      <li>List 4</li>
      <li>List 5</li>
      <li>List 6</li>
      <li>List 7</li>
      <li>List 8</li>
      <li>List 9</li>
     <ul>
<label class="more">See more...</label>
</div>

<div class="filter-list">
    <ul id="someidthree">
      <li>List 1</li>
      <li>List 2</li>
      <li>List 3</li>
      <li>List 4</li>
    <ul>
<label class="more">See more...</label>
</div>

CSS
To hide the list more than 5

.filter-list ul li:nth-child(n + 6) {
    display: none;
}

//By default more button will be hidden and have to show if LI get exceed with 5

.filter-list label.more {
	color: #f86843;
	font-weight: 600;
	font-style: oblique;
	display: none;
}

JQuery
To Get the count of li.

        var liCount;
        $(document).ready(function () {
            $('.filter-list ul').each(function () {
                liCount = $(this).children('li').length
                console.log(liCount);
            });
        });
2

Well you are 99% of the way there. Just select the see more button in relation to each filter-list.

$('.filter-list ul').each(function () {
     liCount = $(this).children('li').length;

     // If LI count is greater than or equal to 5, find the '.more' button of filter-list and show it.
     if (liCount >= 5) {
         $(this).parent().find('.more').show();
     }
     console.log(liCount);
});

So as you can see we just use the count to then trigger an if statement where we find the .more class button and show it.

Hope this helps! :slight_smile:

2 Likes
3

I was just about to post this but was beaten by @Martyr2 above :slight_smile:

I’ll post anyway as it may be of some use as I added a click event for the more button to show the extra items.

Obviously you would either then need to remove the more button as there is no more to see or make it say “see less” and do the reverse of what just happened. :slight_smile:

1 Like
4

I’ve taken that codePen and extended it a bit.

First, I’ve added a cursor of pointer on the more sections, so that the mouse pointer shows as a hand letting us know that we can interact with it.

.filter-list .more {
  cursor: pointer;
}

With the more/less situation, I started off my checking if it says “more” so that we can undo things when it doesn’t.

  $(".more").click(function () {
    if (this.innerHTML.includes("more")) {
      $(this).prev("ul").find("li").addClass("showList");
      $(this).text("See less...");
    } else {
      $(this).prev("ul").find("li").removeClass("showList");
      $(this).text("See more...");
    }

It now seems clear that we can use toggleClass instead of add and remove, and because the lines are now the same we can pull it up out of the if statement.

  $(".more").click(function () {
    $(this).prev("ul").find("li").toggleClass("showList");
    if (this.innerHTML.includes("more")) {
      $(this).text("See less...");
    } else {
      $(this).text("See more...");
    }
  });

And that remaining if statement can be turned into a conditional:

  $(this).text(
    this.innerHTML.includes("more")
    ? "See less..."
    : "See more..."
  );

The code can be seen working at https://codepen.io/pmw57/pen/ExWeKRV

2 Likes
5

Here is also a version that uses no jQuery. The code when it’s not running on codePen has the more sections appearing instantly now, instead of after a delay.

const lists = document.querySelectorAll(".filter-list");
lists.forEach(function (list) {
  const liCount = list.querySelectorAll("li").length;
  if (liCount > 5) {
    list.querySelector(".more").classList.add("showMe");
  }
});

const moreEls = document.querySelectorAll(".more");
moreEls.forEach(function (more) {
  more.addEventListener("click", function (evt) {
    const more = evt.target;
    const ul = more.previousElementSibling;
    ul.querySelector("li").forEach(function (li) {
      li.toggleClass("showList");
    });
    more.innerHTML = more.innerHTML.includes("more")
      ? "See less..."
      : "See more...";
  });
});

1 Like
6

Thanks to all of you for helping me out. My problem is solved now :slight_smile:

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.