Expand listing when clicking

0

I have a select that returns me 40 records. I want to initially print 10 of them and then create a See More button where I will expand the list by displaying 10 more items until I complete my total of 40 records and disappear as soon as I finish them all.

An example of this working button can be seen here at Free Market at the end of the questions asked the seller.     

asked by anonymous 17.08.2016 / 04:22

1 answer

0

You can put all elements with a class in common, add a class with display: none to all elements, and every click of button load you remove this class of 10 elements.

var quantidade = 10;
var carregar = document.getElementById("carregar");
var conteudos = document.querySelectorAll(".conteudo");
conteudos = [].slice.call(conteudos);
conteudos.forEach(function (conteudo, indice) {
  conteudo.classList.add("hide");
});

var onCarregarClick = function (event) {
  for (var indice = 0; indice < quantidade; indice++) {
    var conteudo = conteudos.shift();
    if (conteudo)
      conteudo.classList.remove("hide");
    if (conteudos.length == 0) {
      carregar.classList.add("hide");
      return;
    }
  }
}
carregar.addEventListener("click", onCarregarClick);
carregar.dispatchEvent(new Event("click"));
.hide {
  display: none;
}
<div class="conteudo">Conteudo 01</div>
<div class="conteudo">Conteudo 02</div>
<div class="conteudo">Conteudo 03</div>
<div class="conteudo">Conteudo 04</div>
<div class="conteudo">Conteudo 05</div>
<div class="conteudo">Conteudo 06</div>
<div class="conteudo">Conteudo 07</div>
<div class="conteudo">Conteudo 08</div>
<div class="conteudo">Conteudo 09</div>
<div class="conteudo">Conteudo 10</div>
<div class="conteudo">Conteudo 11</div>
<div class="conteudo">Conteudo 12</div>
<div class="conteudo">Conteudo 13</div>
<div class="conteudo">Conteudo 14</div>
<div class="conteudo">Conteudo 15</div>
<div class="conteudo">Conteudo 16</div>
<div class="conteudo">Conteudo 17</div>
<div class="conteudo">Conteudo 18</div>
<div class="conteudo">Conteudo 19</div>
<div class="conteudo">Conteudo 20</div>
<div class="conteudo">Conteudo 21</div>
<div class="conteudo">Conteudo 22</div>
<div class="conteudo">Conteudo 23</div>
<div class="conteudo">Conteudo 24</div>
<div class="conteudo">Conteudo 25</div>
<div class="conteudo">Conteudo 26</div>
<div class="conteudo">Conteudo 27</div>
<div class="conteudo">Conteudo 28</div>
<div class="conteudo">Conteudo 29</div>
<div class="conteudo">Conteudo 30</div>
<div class="conteudo">Conteudo 31</div>
<div class="conteudo">Conteudo 32</div>
<div class="conteudo">Conteudo 33</div>
<div class="conteudo">Conteudo 34</div>
<div class="conteudo">Conteudo 35</div>
<div class="conteudo">Conteudo 36</div>
<div class="conteudo">Conteudo 37</div>
<input id="carregar" type="button" value="Carregar" />
    
17.08.2016 / 14:15