Expand listing by clicking

Asked

Viewed 699 times

0

I have a select that returns me 40 records. I want to initially print 10 of them and then create a button See more where you 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 on Mercado Livre at the end of questions to the seller.

jquery html

  • I think what you are looking for is called "Paging", you can find it at http://answall.com/questions/26303/como-fazer-pagina%C3%A7%C3%A3o-php-e-mysql.

  • not quite that no, everything will be displayed on the same page... I just don’t want to load everything at once in case the user doesn’t want to read. but if interested you can click the button and will show more things every time you click... you can see an identical example of what I want in the free market link I posted, in the part where displays the questions to the seller

  • The free market carries ALL questions at once, at least on this link! All "hidden" questions are with the class ch-hide. When you click on "See more questions" it simply removes the ch-hide, even for this reason is displayed immediately. So, if you want something like this, press all of them and then hide X. When you click make the elements visible. The other way is to load by AJAX, that is, when clicking sends a request to the server (which responds) and then displays, identical system to paging.

  • Yes that’s exactly what I want, load all and go showing little by little by clicking the button until the list is finished. I get lost in how I would create this array and I would limit forever to go showing from ten to ten... know any example? the above comment has already opened me quite the way of how to do, obg

1 answer

0


you can put all elements with a class in common, add a class with display: none is all elements, and every click of the 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" />

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.