CODEWITHSUNDEEP
javascriptjqueryhtml
user1038814
user1038814

Reputation: 9657

Target multiple lists in jquery

I have three lists with the same class names. On load, I only show 5 list items per list and there are "show more" buttons which reveals the rest of the list items when clicked.

I want the behaviour such that, when the 'show more" button is pressed for one list, it also shows the hidden list items for the other lists.

My predicament is that the 3 lists behave like 1 big list and show the list items sequentially, instead of showing all the items for all lists together.

Any idea how I can get all the lists to behave in unison?

$(document).ready(function(){

      var list = $(".list li");
      var numToShow = 5;
      var button = $(".next");
      var numInList = list.length;
      list.hide();
      if (numInList > numToShow) {
        button.show();
      }
      list.slice(0, numToShow).show();

      button.click(function(){
          var showing = list.filter(':visible').length;
          list.slice(showing - 1, showing + numToShow).fadeIn();
          var nowShowing = list.filter(':visible').length;
          if (nowShowing >= numInList) {
            button.hide();
          }
      });

});
.list {
	padding: 0;
	margin: 0;
}

.list li {
	position: relative;
	margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<h1> LIst 1</h1>
	 <ul class="list">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
     <li>Item 7</li>
     <li>Item 8</li>
     <li>Item 9</li>
     <li>Item 10</li>
  </ul>
  <button class="next">Show More</button>
  <h1> LIst 2</h1>
	 <ul class="list">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
     <li>Item 7</li>
     <li>Item 8</li>
     <li>Item 9</li>
     <li>Item 10</li>
  </ul>
  <button class="next">Show More</button>
  <h1> LIst 3</h1>
	 <ul class="list">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
     <li>Item 7</li>
     <li>Item 8</li>
     <li>Item 9</li>
     <li>Item 10</li>
  </ul>
  <button class="next">Show More</button>
</div>

Upvotes: 1

Views: 315

Answers (2)

Kirill Simonov
Kirill Simonov

Reputation: 8481

As already mentioned by Pedro, the problem with your code is that you select all the li elements at once, no matter which list they belong to.

You should iterate through lists and work with their items separetely.

And if you want behaviour such that, when the 'show more' button is pressed for one list, it also shows the hidden list items for the other lists, you need to iterate through lists on each button click too and show a needed number of items for each of lists.

$(document).ready(function(){

      var numToShow = 3;
      
      $(".list").each(function(i, list) {
          var li = $(list).find("li");
          var numInList = li.length;
          li.hide();
          if (numInList > numToShow) {
              $(list).next(".next").show();
          }
          li.slice(0, numToShow).show();
      });
      
      $(".next").click(function() {
          $(".list").each(function(i, list) {
              var li = $(list).find("li");
              var numInList = li.length;
              var showing = li.filter(':visible').length;
              li.slice(showing - 1, showing + numToShow).fadeIn();
              var nowShowing = li.filter(':visible').length;
              if (nowShowing >= numInList) {
                $(list).next(".next").hide();
              }
          });
          
      });

});
.list {
	padding: 0;
	margin: 0;
}

.list li {
	position: relative;
	margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<h1> List 1</h1>
	 <ul class="list">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
  </ul>
  <button class="next">Show More</button>
  <h1> List 2</h1>
	 <ul class="list">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
     <li>Item 7</li>
     <li>Item 8</li>
     <li>Item 9</li>
  </ul>
  <button class="next">Show More</button>
  <h1> List 3</h1>
	 <ul class="list">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
     <li>Item 7</li>
     <li>Item 8</li>
     <li>Item 9</li>
     <li>Item 10</li>
     <li>Item 11</li>
     <li>Item 12</li>
  </ul>
  <button class="next">Show More</button>
</div>

Upvotes: 0

Pedro Martins
Pedro Martins

Reputation: 874

You must treat the lists separately, like this:

$(document).ready(function(){

  var $list = $(".list");
  var numToShow = 5;
  var $buttons = $(".next");
  $buttons.hide();

  $list.each(function() {
    var $listItems = $(this).find("li");
    var $button = $(this).next('.next');
    var numInList = $listItems.length;
    $listItems.hide();
    if (numInList > numToShow) {
      $button.show();
    }
    $listItems.slice(0, numToShow).show();
  })

  $buttons.click(function(){
    var $this = $(this);
    var $list = $this.prev(".list");
    var $listItems = $list.find("li");
    var showing = $listItems.filter(':visible').length;
    $listItems.slice(showing - 1, showing + numToShow).fadeIn();
    var nowShowing = $listItems.filter(':visible').length;
    var numInList = $listItems.length;
    if (nowShowing >= numInList) {
      $this.hide();
    }
  });

});
.list {
	padding: 0;
	margin: 0;
}

.list li {
	position: relative;
	margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <h1> LIst 1</h1>
	 <ul class="list">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
     <li>Item 7</li>
     <li>Item 8</li>
     <li>Item 9</li>
     <li>Item 10</li>
  </ul>
  <button class="next">Show More</button>
  <h1> LIst 2</h1>
	 <ul class="list">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
     <li>Item 7</li>
     <li>Item 8</li>
     <li>Item 9</li>
     <li>Item 10</li>
  </ul>
  <button class="next">Show More</button>
  <h1> LIst 3</h1>
	 <ul class="list">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
     <li>Item 7</li>
     <li>Item 8</li>
     <li>Item 9</li>
     <li>Item 10</li>
  </ul>
  <button class="next">Show More</button>
</div>

Upvotes: 1

Related Questions