Expand listing when clicking

Question

Expand listing when clicking

Navigation

#1 by (0 votes)

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.

html jquery

asked by anonymous 17.08.2016 / 04:22

1 answer

Error while compiling a project in delphi seattle for android sando SQLite Tcp Server adds the client name to a lisbox

score 0 · Accepted Answer

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" />