function to display more items in a <ul>

Asked

Viewed 107 times

1

I need only 5 items to be shown and in case the user wants to see more items he needs to click the button 'see more' and 5 more items will be displayed. Remembering q there is no limit amount of items. 

<ul class="list">
  <a href="loja1">
    <li>
      <img src="images/icon.jpg" title="" alt="" />
      <section class="list-left">
        <h5 class="title">Loja 1</h5>
      </section>
      <section class="list-left">
        <span class="catpath1">Telefone :</span>
        <span class="catpath">(99) 9999-9999</span>
      </section>
      <section class="list-left">
        <span class="catpath1">Endereço :</span>
        <span class="catpath">R blablabla, 222</span>
      </section>
      <section class="list-right">
        <span class="cityname">Sao Paulo-SP</span>
      </section>
      <div class="clearfix"></div>
    </li>
  </a>
  <a href="loja2">
    <li>
      <img src="images/icon.jpg" title="" alt="" />
      <section class="list-left">
        <h5 class="title">Loja 2</h5>
      </section>
      <section class="list-left">
        <span class="catpath1">Telefone :</span>
        <span class="catpath">(99) 9999-9999</span>
      </section>
      <section class="list-left">
        <span class="catpath1">Endereço :</span>
        <span class="catpath">R blablabla, 222</span>
      </section>
      <section class="list-right">
        <span class="cityname">Sao Paulo-SP</span>
      </section>
      <div class="clearfix"></div>
    </li>
  </a>
  <a href="loja3">
    <li>
      <img src="images/icon.jpg" title="" alt="" />
      <section class="list-left">
        <h5 class="title">Loja 3</h5>
      </section>
      <section class="list-left">
        <span class="catpath1">Telefone :</span>
        <span class="catpath">(99) 9999-9999</span>
      </section>
      <section class="list-left">
        <span class="catpath1">Endereço :</span>
        <span class="catpath">R blablabla, 222</span>
      </section>
      <section class="list-right">
        <span class="cityname">Sao Paulo-SP</span>
      </section>
      <div class="clearfix"></div>
    </li>
  </a>
  <a href="loja4">
    <li>
      <img src="images/icon.jpg" title="" alt="" />
      <section class="list-left">
        <h5 class="title">Loja 4</h5>
      </section>
      <section class="list-left">
        <span class="catpath1">Telefone :</span>
        <span class="catpath">(99) 9999-9999</span>
      </section>
      <section class="list-left">
        <span class="catpath1">Endereço :</span>
        <span class="catpath">R blablabla, 222</span>
      </section>
      <section class="list-right">
        <span class="cityname">Sao Paulo-SP</span>
      </section>
      <div class="clearfix"></div>
    </li>
  </a>
  <a href="loja5">
    <li>
      <img src="images/icon.jpg" title="" alt="" />
      <section class="list-left">
        <h5 class="title">Loja 5</h5>
      </section>
      <section class="list-left">
        <span class="catpath1">Telefone :</span>
        <span class="catpath">(99) 9999-9999</span>
      </section>
      <section class="list-left">
        <span class="catpath1">Endereço :</span>
        <span class="catpath">R blablabla, 222</span>
      </section>
      <section class="list-right">
        <span class="cityname">Sao Paulo-SP</span>
      </section>
      <div class="clearfix"></div>
    </li>
  </a>
  <a href="loja6">
    <li>
      <img src="images/icon.jpg" title="" alt="" />
      <section class="list-left">
        <h5 class="title">Loja 6</h5>
      </section>
      <section class="list-left">
        <span class="catpath1">Telefone :</span>
        <span class="catpath">(99) 9999-9999</span>
      </section>
      <section class="list-left">
        <span class="catpath1">Endereço :</span>
        <span class="catpath">R blablabla, 222</span>
      </section>
      <section class="list-right">
        <span class="cityname">Sao Paulo-SP</span>
      </section>
      <div class="clearfix"></div>
    </li>
  </a>
  <a href="loja7">
    <li>
      <img src="images/icon.jpg" title="" alt="" />
      <section class="list-left">
        <h5 class="title">Loja 7</h5>
      </section>
      <section class="list-left">
        <span class="catpath1">Telefone :</span>
        <span class="catpath">(99) 9999-9999</span>
      </section>
      <section class="list-left">
        <span class="catpath1">Endereço :</span>
        <span class="catpath">R blablabla, 222</span>
      </section>
      <section class="list-right">
        <span class="cityname">Sao Paulo-SP</span>
      </section>
      <div class="clearfix"></div>
    </li>
  </a>
  <a href="loja8">
    <li>
      <img src="images/icon.jpg" title="" alt="" />
      <section class="list-left">
        <h5 class="title">Loja 8</h5>
      </section>
      <section class="list-left">
        <span class="catpath1">Telefone :</span>
        <span class="catpath">(99) 9999-9999</span>
      </section>
      <section class="list-left">
        <span class="catpath1">Endereço :</span>
        <span class="catpath">R blablabla, 222</span>
      </section>
      <section class="list-right">
        <span class="cityname">Sao Paulo-SP</span>
      </section>
      <div class="clearfix"></div>
    </li>
  </a>
  <a href="loja9">
    <li>
      <img src="images/icon.jpg" title="" alt="" />
      <section class="list-left">
        <h5 class="title">Loja 9</h5>
      </section>
      <section class="list-left">
        <span class="catpath1">Telefone :</span>
        <span class="catpath">(99) 9999-9999</span>
      </section>
      <section class="list-left">
        <span class="catpath1">Endereço :</span>
        <span class="catpath">R blablabla, 222</span>
      </section>
      <section class="list-right">
        <span class="cityname">Sao Paulo-SP</span>
      </section>
      <div class="clearfix"></div>
    </li>
  </a>
</ul>

javascript html

  • Add the values in one array and then make a for of n up to 4 and store the largest number in a global variable. You can initialize n = 0

  • you can set an initial height for the list and hide the rest with Hidden overflow, and as the user clicks it increases the height

2 answers

2


Edit

I created a class .blocos to use instead of href.

With jQuery it would be much easier, but it follows in pure JS.

First is to hide all <a> who possess href="shop.." the class .blocos in the CSS:

.blocos{
   display: none;
}

Then the idea is to define the items at a time in a variable that I called itens = 5; and show the first 5 items on the page loading. But first I added a button See more... in the end.

Then you just do loops showing only invisible items within the variable boundary itens every time the button See more... is clicked:

var itens = 5;
var lojas = document.querySelectorAll(".blocos");
for(var x=0; x<itens; x++){
   lojas[x].style.display = "block";
}

document.querySelector("#vermais").addEventListener("click", function(){

   var visiveis = document.querySelectorAll(".blocos");
   var conta = 0;
   for(var x=0; x<visiveis.length; x++){
      if(visiveis[x].style.display == "block") conta++;
   }

   var limite = conta+itens > lojas.length-1 ? lojas.length : conta+itens;

   for(var x=conta; x<limite; x++){
      lojas[x].style.display = "block";
   }
   
   // Aqui eu faço o botão desaparecer quando não tiver mais nada pra mostrar
   if(lojas.length - conta < itens) document.querySelector("#vermais").outerHTML = '';
});
.blocos{
   display: none;
}

#vermais{
   margin-top: 15px;
}
<ul class="list">
  <a class="blocos" href="loja1">
    <li>
      <img src="images/icon.jpg" title="" alt="" />
      <section class="list-left">
        <h5 class="title">Loja 1</h5>
      </section>
      <section class="list-left">
        <span class="catpath1">Telefone :</span>
        <span class="catpath">(99) 9999-9999</span>
      </section>
      <section class="list-left">
        <span class="catpath1">Endereço :</span>
        <span class="catpath">R blablabla, 222</span>
      </section>
      <section class="list-right">
        <span class="cityname">Sao Paulo-SP</span>
      </section>
      <div class="clearfix"></div>
    </li>
  </a>
  <a class="blocos" href="loja2">
    <li>
      <img src="images/icon.jpg" title="" alt="" />
      <section class="list-left">
        <h5 class="title">Loja 2</h5>
      </section>
      <section class="list-left">
        <span class="catpath1">Telefone :</span>
        <span class="catpath">(99) 9999-9999</span>
      </section>
      <section class="list-left">
        <span class="catpath1">Endereço :</span>
        <span class="catpath">R blablabla, 222</span>
      </section>
      <section class="list-right">
        <span class="cityname">Sao Paulo-SP</span>
      </section>
      <div class="clearfix"></div>
    </li>
  </a>
  <a class="blocos" href="loja3">
    <li>
      <img src="images/icon.jpg" title="" alt="" />
      <section class="list-left">
        <h5 class="title">Loja 3</h5>
      </section>
      <section class="list-left">
        <span class="catpath1">Telefone :</span>
        <span class="catpath">(99) 9999-9999</span>
      </section>
      <section class="list-left">
        <span class="catpath1">Endereço :</span>
        <span class="catpath">R blablabla, 222</span>
      </section>
      <section class="list-right">
        <span class="cityname">Sao Paulo-SP</span>
      </section>
      <div class="clearfix"></div>
    </li>
  </a>
  <a class="blocos" href="loja4">
    <li>
      <img src="images/icon.jpg" title="" alt="" />
      <section class="list-left">
        <h5 class="title">Loja 4</h5>
      </section>
      <section class="list-left">
        <span class="catpath1">Telefone :</span>
        <span class="catpath">(99) 9999-9999</span>
      </section>
      <section class="list-left">
        <span class="catpath1">Endereço :</span>
        <span class="catpath">R blablabla, 222</span>
      </section>
      <section class="list-right">
        <span class="cityname">Sao Paulo-SP</span>
      </section>
      <div class="clearfix"></div>
    </li>
  </a>
  <a class="blocos" href="loja5">
    <li>
      <img src="images/icon.jpg" title="" alt="" />
      <section class="list-left">
        <h5 class="title">Loja 5</h5>
      </section>
      <section class="list-left">
        <span class="catpath1">Telefone :</span>
        <span class="catpath">(99) 9999-9999</span>
      </section>
      <section class="list-left">
        <span class="catpath1">Endereço :</span>
        <span class="catpath">R blablabla, 222</span>
      </section>
      <section class="list-right">
        <span class="cityname">Sao Paulo-SP</span>
      </section>
      <div class="clearfix"></div>
    </li>
  </a>
  <a class="blocos" href="loja6">
    <li>
      <img src="images/icon.jpg" title="" alt="" />
      <section class="list-left">
        <h5 class="title">Loja 6</h5>
      </section>
      <section class="list-left">
        <span class="catpath1">Telefone :</span>
        <span class="catpath">(99) 9999-9999</span>
      </section>
      <section class="list-left">
        <span class="catpath1">Endereço :</span>
        <span class="catpath">R blablabla, 222</span>
      </section>
      <section class="list-right">
        <span class="cityname">Sao Paulo-SP</span>
      </section>
      <div class="clearfix"></div>
    </li>
  </a>
  <a class="blocos" href="loja7">
    <li>
      <img src="images/icon.jpg" title="" alt="" />
      <section class="list-left">
        <h5 class="title">Loja 7</h5>
      </section>
      <section class="list-left">
        <span class="catpath1">Telefone :</span>
        <span class="catpath">(99) 9999-9999</span>
      </section>
      <section class="list-left">
        <span class="catpath1">Endereço :</span>
        <span class="catpath">R blablabla, 222</span>
      </section>
      <section class="list-right">
        <span class="cityname">Sao Paulo-SP</span>
      </section>
      <div class="clearfix"></div>
    </li>
  </a>
  <a class="blocos" href="loja8">
    <li>
      <img src="images/icon.jpg" title="" alt="" />
      <section class="list-left">
        <h5 class="title">Loja 8</h5>
      </section>
      <section class="list-left">
        <span class="catpath1">Telefone :</span>
        <span class="catpath">(99) 9999-9999</span>
      </section>
      <section class="list-left">
        <span class="catpath1">Endereço :</span>
        <span class="catpath">R blablabla, 222</span>
      </section>
      <section class="list-right">
        <span class="cityname">Sao Paulo-SP</span>
      </section>
      <div class="clearfix"></div>
    </li>
  </a>
  <a class="blocos" href="loja9">
    <li>
      <img src="images/icon.jpg" title="" alt="" />
      <section class="list-left">
        <h5 class="title">Loja 9</h5>
      </section>
      <section class="list-left">
        <span class="catpath1">Telefone :</span>
        <span class="catpath">(99) 9999-9999</span>
      </section>
      <section class="list-left">
        <span class="catpath1">Endereço :</span>
        <span class="catpath">R blablabla, 222</span>
      </section>
      <section class="list-right">
        <span class="cityname">Sao Paulo-SP</span>
      </section>
      <div class="clearfix"></div>
    </li>
  </a>
  <a class="blocos" href="loja10">
    <li>
      <img src="images/icon.jpg" title="" alt="" />
      <section class="list-left">
        <h5 class="title">Loja 10</h5>
      </section>
      <section class="list-left">
        <span class="catpath1">Telefone :</span>
        <span class="catpath">(99) 9999-9999</span>
      </section>
      <section class="list-left">
        <span class="catpath1">Endereço :</span>
        <span class="catpath">R blablabla, 222</span>
      </section>
      <section class="list-right">
        <span class="cityname">Sao Paulo-SP</span>
      </section>
      <div class="clearfix"></div>
    </li>
  </a>
  <a class="blocos" href="loja11">
    <li>
      <img src="images/icon.jpg" title="" alt="" />
      <section class="list-left">
        <h5 class="title">Loja 11</h5>
      </section>
      <section class="list-left">
        <span class="catpath1">Telefone :</span>
        <span class="catpath">(99) 9999-9999</span>
      </section>
      <section class="list-left">
        <span class="catpath1">Endereço :</span>
        <span class="catpath">R blablabla, 222</span>
      </section>
      <section class="list-right">
        <span class="cityname">Sao Paulo-SP</span>
      </section>
      <div class="clearfix"></div>
    </li>
  </a>
  <a class="blocos" href="loja12">
    <li>
      <img src="images/icon.jpg" title="" alt="" />
      <section class="list-left">
        <h5 class="title">Loja 12</h5>
      </section>
      <section class="list-left">
        <span class="catpath1">Telefone :</span>
        <span class="catpath">(99) 9999-9999</span>
      </section>
      <section class="list-left">
        <span class="catpath1">Endereço :</span>
        <span class="catpath">R blablabla, 222</span>
      </section>
      <section class="list-right">
        <span class="cityname">Sao Paulo-SP</span>
      </section>
      <div class="clearfix"></div>
    </li>
  </a>
  <a class="blocos" href="loja13">
    <li>
      <img src="images/icon.jpg" title="" alt="" />
      <section class="list-left">
        <h5 class="title">Loja 13</h5>
      </section>
      <section class="list-left">
        <span class="catpath1">Telefone :</span>
        <span class="catpath">(99) 9999-9999</span>
      </section>
      <section class="list-left">
        <span class="catpath1">Endereço :</span>
        <span class="catpath">R blablabla, 222</span>
      </section>
      <section class="list-right">
        <span class="cityname">Sao Paulo-SP</span>
      </section>
      <div class="clearfix"></div>
    </li>
  </a>
  <button id="vermais">Ver mais...</button>
</ul>

  • I liked your code to hide all read

  • Thank you very much guy, exactly what I need.

  • An @Dvd question if you have to change the name of ul.list to[href*='store'] and it has to be different as a store, restaurant, workshop.. how should it be done? I’m sorry more I don’t know almost related to scripts.

  • @Kauegalvão In this case you can add a class, is even easier. It would be: <a class="blocos" href="loja2">... there in the JS would be: var lojas = document.querySelectorAll(".blocos");

  • @Kauegalvão E in CSS: .blocos{ display: none; }

  • I made the changes you requested, but now nothing else appears. Don’t need to change that line as well @Dvd? var visiveis = Document.querySelectorAll("ul.list a[href*='store']");

  • @Kauegalvão Yes, all that was "ul.list a[href*='loja'] you will change to the class you created

  • @Kauegalvão I will edit the answer by placing a class.

  • @Reply Kauegalvão updated. Take a look, sometimes you forgot some detail.

  • Mano already discovered the problem, was using the **** filezila, gave problem in the js file I apologize for your time. Ta working straight I will delete my comment.

  • @Kauegalvão Relax, it’s no bother. QQ thing if I can help, just call.

Show 6 more comments

1

As stated in the comment. You can insert your elements in a array.

And so when loading the page show only the 4 and a link that shows more (in case all).

take the example:

//esse array irá conter todas as suas li e seus links
array = [];

//como voce disse que pode ser várias, então aqui você irá adicionar quantas forem no array.

//exemplo feito com uma li.
array[0] = "<a href='loja_NOVA'>    <li>      <img src='images/icon.jpg' title='' alt='' />      <section class='list-left'>        <h5 class='title'>loja_NOVA</h5>      </section>      <section class='list-left'>        <span class='catpath1'>Telefone :</span>        <span class='catpath'>(99) 9999-9999</span>      </section>      <section class='list-left'>        <span class='catpath1'>Endereço :</span>        <span class='catpath'>R blablabla, 222</span>      </section>      <section class='list-right'>        <span class='cityname'>Sao Paulo-SP</span>      </section>      <div class='clearfix'></div>    </li>  </a>";

array[1] = "<a href='loja_NOVA'>    <li>      <img src='images/icon.jpg' title='' alt='' />      <section class='list-left'>        <h5 class='title'>loja_NOVA</h5>      </section>      <section class='list-left'>        <span class='catpath1'>Telefone :</span>        <span class='catpath'>(99) 9999-9999</span>      </section>      <section class='list-left'>        <span class='catpath1'>Endereço :</span>        <span class='catpath'>R blablabla, 222</span>      </section>      <section class='list-right'>        <span class='cityname'>Sao Paulo-SP</span>      </section>      <div class='clearfix'></div>    </li>  </a>";

array[2] = "<a href='loja_NOVA'>    <li>      <img src='images/icon.jpg' title='' alt='' />      <section class='list-left'>        <h5 class='title'>loja_NOVA</h5>      </section>      <section class='list-left'>        <span class='catpath1'>Telefone :</span>        <span class='catpath'>(99) 9999-9999</span>      </section>      <section class='list-left'>        <span class='catpath1'>Endereço :</span>        <span class='catpath'>R blablabla, 222</span>      </section>      <section class='list-right'>        <span class='cityname'>Sao Paulo-SP</span>      </section>      <div class='clearfix'></div>    </li>  </a>";

array[3] = "<a href='loja_NOVA'>    <li>      <img src='images/icon.jpg' title='' alt='' />      <section class='list-left'>        <h5 class='title'>loja_NOVA</h5>      </section>      <section class='list-left'>        <span class='catpath1'>Telefone :</span>        <span class='catpath'>(99) 9999-9999</span>      </section>      <section class='list-left'>        <span class='catpath1'>Endereço :</span>        <span class='catpath'>R blablabla, 222</span>      </section>      <section class='list-right'>        <span class='cityname'>Sao Paulo-SP</span>      </section>      <div class='clearfix'></div>    </li>  </a>";

array[4] = "<a href='loja_NOVA'>    <li>      <img src='images/icon.jpg' title='' alt='' />      <section class='list-left'>        <h5 class='title'>loja_NOVA</h5>      </section>      <section class='list-left'>        <span class='catpath1'>Telefone :</span>        <span class='catpath'>(99) 9999-9999</span>      </section>      <section class='list-left'>        <span class='catpath1'>Endereço :</span>        <span class='catpath'>R blablabla, 222</span>      </section>      <section class='list-right'>        <span class='cityname'>Sao Paulo-SP</span>      </section>      <div class='clearfix'></div>    </li>  </a>";

array[5] = "<a href='loja_NOVA'>    <li>      <img src='images/icon.jpg' title='' alt='' />      <section class='list-left'>        <h5 class='title'>loja_NOVA</h5>      </section>      <section class='list-left'>        <span class='catpath1'>Telefone :</span>        <span class='catpath'>(99) 9999-9999</span>      </section>      <section class='list-left'>        <span class='catpath1'>Endereço :</span>        <span class='catpath'>R blablabla, 222</span>      </section>      <section class='list-right'>        <span class='cityname'>Sao Paulo-SP</span>      </section>      <div class='clearfix'></div>    </li>  </a>";

array[6] = "<a href='loja_NOVA'>    <li>      <img src='images/icon.jpg' title='' alt='' />      <section class='list-left'>        <h5 class='title'>loja_NOVA</h5>      </section>      <section class='list-left'>        <span class='catpath1'>Telefone :</span>        <span class='catpath'>(99) 9999-9999</span>      </section>      <section class='list-left'>        <span class='catpath1'>Endereço :</span>        <span class='catpath'>R blablabla, 222</span>      </section>      <section class='list-right'>        <span class='cityname'>Sao Paulo-SP</span>      </section>      <div class='clearfix'></div>    </li>  </a>";


//essa função será chamada no carregar da pagina, e irá mostrar somente os 4 como você falou


window.onload = function() {
quantos = 4;
mybtn = document.getElementById('btnm-o');

mostra_quatro();

};

function mostra_quatro(){

var wrapper = document.getElementById('ul_master');

//pega o conteudo que esta dentro do seu ul

if(quantos == 4){
HTMLTemporario = wrapper.innerHTML;
}else{
HTMLTemporario = '';
}
// vai colocando as strings <a><li> até dar 4.
for (i = 0; i < 3; i++) { 
HTMLTemporario = HTMLTemporario+ array[i];
}

// Coloca a nova string(que é o HTML) no DOM
wrapper.innerHTML = HTMLTemporario;

mybtn.innerHTML = 'Mostrar Mais';

}


function mostra_mais(){

if(quantos != 4){
   mostra_quatro();
}else{

var wrapper = document.getElementById('ul_master');
//pega o conteudo que esta dentro do seu ul
HTMLTemporario = wrapper.innerHTML;

// vai colocando as strings <a><li> até dar o fim do array 1 ou 1 milhao.
for (i = 0; i < array.length; i++) { 
HTMLTemporario = HTMLTemporario + array[i];
}

// Coloca a nova string(que é o HTML) no DOM
wrapper.innerHTML = HTMLTemporario;

mybtn.innerHTML = 'Exibir Menos';
quantos = 99;
}
}
<ul class="list" id='ul_master'>
  
  
</ul>
<button type='button' onclick='mostra_mais()' id='btnm-o'>mostra mais</button>

  • Very good also your code, I only have one question, after clicking show less because when I click on show more again it does not show?

  • @Kauegalvão ah is because I had understood that it would be a show more, and a show less, (you can notice that in my answer he changes the text of the button). But since you already have an example of what you wanted in the other answer, then I’ll leave mine as well as an alternative answer, can you? but if you want I can put the show more like his

  • your answer is perfect, I just want to know if there is the possibility of being able to click several times, for example I click on show more, there shows 5 items, then click again and show 5 more clicks more 5... Only when arriving at the end appeared the option show less. But it’s great this really good code really helped me a lot bro!!!

  • Yes, I’ll do it in this scheme! Thanks Kaue! We are here to help us!

Browser other questions tagged javascript html

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