How to show 5 in 5 hidden elements?

Question

How to show 5 in 5 hidden elements?

Navigation

#1 by (2 votes)

0

I've recently been hit with a question, for which I have to manipulate a number of elements hidden through display:none; which is set on the span that surrounds all of them.

Example

<html>

<head>

<script>
    var linhas = 25;

function mostrarGrupo() {

    for( var i = linhas; i < linhas + 5; i++) {

        document.getElementById('resultado').innerHTML += i + '<br>'

    }

}
</script>

</head>

</body>

    <input type="button" value="mais" onclick="mostrarGrupo()"/>

<br><br>

    <div id="resultado"> &nbsp; </div>
   
<span id="dados" style="display:none">

// Primeiro Grupo

<hr id='linha1'> 
<hr id='linha2'> 
<hr id='linha3'> 
<hr id='linha4'> 
<hr id='linha5'> 

// Segundo Grupo

<hr id='linha6'> 
<hr id='linha7'> 
<hr id='linha8'> 
<hr id='linha9'> 
<hr id='linha10'> 

// Terceiro Grupo

<hr id='linha11'> 
<hr id='linha12'> 
<hr id='linha13'> 
<hr id='linha14'> 
<hr id='linha15'> 

// Quarto Grupo

<hr id='linha16'> 
<hr id='linha17'> 
<hr id='linha18'> 
<hr id='linha19'> 
<hr id='linha20'> 

// Quinto Grupo

<hr id='linha21'> 
<hr id='linha22'> 
<hr id='linha23'> 
<hr id='linha24'> 
<hr id='linha25'> 

</span>

</body>

</html>

For this, you only need to show within id resultado every 5 hidden element.

Each click plus 5 hidden elements in the HTML document becomes visible in id resultado .

See how it should look:

So with focus on this, how can I accomplish this?

javascript loop css for

asked by anonymous 15.02.2017 / 23:06

1 answer

Get information from an "Object" Good Practice passing arguments to a method when they come from another function

score 2 · Accepted Answer

I suggest a small change in the "database" that will greatly facilitate the understanding of the code. If possible, group the links into divs as below:

var totalGrupos = 5;
var grupo = 1;

function mostrarGrupo() {
  if (grupo <= totalGrupos) {
    document.getElementById('resultado').innerHTML += document.getElementById('grupo' + grupo).innerHTML;
    grupo++;
  }
}

a {
  display: block;
}

<input type="button" value="mais" onclick="mostrarGrupo()" />
<br><br>
<div id="resultado"> &nbsp; </div>

<!--INICIO DO BANCO DE DADOS-->

<span id="dados" style="display:none">
    
    // Primeiro Grupo
    <div id="grupo1">
      <a href="">linha1</a> 
      <a href="">linha2</a>
      <a href="">linha3</a>
      <a href="">linha4</a>
      <a href="">linha5</a> 
    </div>
    // Segundo Grupo
    <div id="grupo2">
      <a href="">linha6</a> 
      <a href="">linha7</a>
      <a href="">linha8</a>
      <a href="">linha9</a>
      <a href="">linha10</a>  
    </div>
    // Terceiro Grupo
    <div id="grupo3">
      <a href="">linha11</a> 
      <a href="">linha12</a>
      <a href="">linha13</a>
      <a href="">linha14</a>
      <a href="">linha15</a> 
    </div>
    // Quarto Grupo
    <div id="grupo4">
      <a href="">linha16</a> 
      <a href="">linha17</a>
      <a href="">linha18</a>
      <a href="">linha19</a>
      <a href="">linha20</a> 
    </div>
    // Quinto Grupo
    <div id="grupo5">
      <a href="">linha21</a> 
      <a href="">linha22</a>
      <a href="">linha23</a>
      <a href="">linha24</a>
      <a href="">linha25</a> 
    </div>
    </span>
<!--FIM DO BANCO DE DADOS-->

see if it meets your need

If you want to stay with your structure the code is this:

<html>
<head>
    <style type="text/css">
    a{
        display: block;
    }
    </style>
    <script>
        var totalGrupos = 5;
        var grupo = 1;

  function mostrarGrupo() {
      if(grupo<=totalGrupos){
          var inicio = (grupo - 1) * 5 +1;
          for(x=inicio;x<inicio+5;x++){
                document.getElementById('resultado').appendChild(document.getElementById('linha' + x));
          }
          grupo ++;
      }
  }
</script>
</head>

<body>
    <input type="button" value="mais" onclick="mostrarGrupo()" />
    <br><br>
    <div id="resultado"> &nbsp; </div>

    <!--INICIO DO BANCO DE DADOS-->

    <span id="dados" style="display:none">

// Primeiro Grupo
  <a href="" id='linha1'>linha1</a> 
  <a href="" id='linha2'>linha2</a>
  <a href="" id='linha3'>linha3</a>
  <a href="" id='linha4'>linha4</a>
  <a href="" id='linha5'>linha5</a> 

// Segundo Grupo
  <a href="" id='linha6'>linha6</a> 
  <a href="" id='linha7'>linha7</a>
  <a href="" id='linha8'>linha8</a>
  <a href="" id='linha9'>linha9</a>
  <a href="" id='linha10'>linha10</a>  

// Terceiro Grupo
  <a href="" id='linha11'>linha11</a> 
  <a href="" id='linha12'>linha12</a>
  <a href="" id='linha13'>linha13</a>
  <a href="" id='linha14'>linha14</a>
  <a href="" id='linha15'>linha15</a> 
</div>
// Quarto Grupo
  <a href="" id='linha16'>linha16</a> 
  <a href="" id='linha17'>linha17</a>
  <a href="" id='linha18'>linha18</a>
  <a href="" id='linha19'>linha19</a>
  <a href="" id='linha20'>linha20</a> 

// Quinto Grupo
  <a href="" id='linha21'>linha21</a> 
  <a href="" id='linha22'>linha22</a>
  <a href="" id='linha23'>linha23</a>
  <a href="" id='linha24'>linha24</a>
  <a href="" id='linha25'>linha25</a> 

</span>
    <!--FIM DO BANCO DE DADOS-->
</body>
</html>
</html>