function to display more items in an ul

Navigation
1

I need only 5 items to be shown and if you want to see more items they need to click the 'see more' button and 5 more items will be displayed. Remember that there is no limit quantity 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>
    
asked by anonymous 02.02.2018 / 19:16

2 answers

2

Edit

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

With jQuery it would be a lot easier, but it goes in pure JS.

First is to hide all <a> that have href="store .." the .blocos class in 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 in the page load. But before I added a button See more ... at the end.

Then just do loops showing only the invisible items within the limit of the itens variable each time the View more ... button is clicked: p> 

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>
    
02.02.2018 / 20:01
1

As stated in the commentary. You can enter your elements in array .

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

See 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>
    
02.02.2018 / 19:47
regroup values from an array into a new array Error: "Maximum recursion depth exceeded while calling a Python object"