Click button more using list (li)

Question

Guys, I need some help. I have a list in the following structure.

<ul>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
</ul>
<a href="#">Carregar Mais</a>

Initially only 10 elements should be displayed, the rest should be hidden, when you click the button to press more, it press 10 more until you have nothing else to show.

I tried using the . length in jQuery, I could tell that I have 30 li’s but when I try to hide it, it gives a display:None in all elements.

Answer 1

You can do it like this:

const load_num = 10;
var times_loaded = 1;
$('li:gt(' +(load_num-1)+ ')').hide(); // esconder as li cujo index >= 10
$('#load_more').on('click', function() {
  times_loaded += 1;
  $('li:lt(' +(load_num*times_loaded)+ ')').show(); // fazer aparerer as li cujo index seja menor que 10*x (load_num*times_loaded)
  console.log('Carregadas mais ' +load_num+ ', Total Carregadas: ' +$('li:visible').length);
});

button {
 margin-bottom: 60px;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
    <li>TESTE</li>
</ul>
<button id="load_more">Carregar mais 10</button>

Answer 2

There are several ways you can get what you want, one of them is this:

First we will set the value that will start to display (for easier execution, put 5 instead of 10). This value is in var count = 5;.

To start, we will use the .Slice() to select the elements we wish to hide.

After that, we will use the event .click() to load more elements. To illustrate, I just add the variable value count with 5 count += 5;. and make a loop of all items smaller than this value, showing the same with the .show().

I think you’ll understand better in the example below:

(function($) {
  //Setamos o valor inicial
  var count = 5;

  //escondemos todos os elementos maior que o valor inicial
  $("li").slice(count).hide();

  $('#carrega-mais').click(function() {

    //Somamos a quantidade nova a ser exibida
    count += 5;

    //Rodamos o loop no valor total
    for (var i = 0; i < count; i++) {
      //Mostramos o item
      $('li').eq(i).show();
    }
  });

}(jQuery));

button {
  margin-bottom: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>TESTE 1</li>
  <li>TESTE 2</li>
  <li>TESTE 3</li>
  <li>TESTE 4</li>
  <li>TESTE 5</li>
  <li>TESTE 6</li>
  <li>TESTE 7</li>
  <li>TESTE 8</li>
  <li>TESTE 9</li>
  <li>TESTE 10</li>
  <li>TESTE 11</li>

  <button id="carrega-mais">Carregar mais 5</button>

The ideal would be to count the amount of li to hide the button carry more when it no longer has elements, but this I leave to you to complement. xD