2

busque diferentes formas pero no logro hacer que, por ejemplo, tengo 5 divs y al final de estos existe un botón "mostrar mas" y este botón muestre otros 5 divs más sin ocultar los anteriores, de modo que ese mismo botón siga debajo de los de 10 divs en total, nuevamente este botón muestra otros 5 divs... así hasta que no existan mas divs.

<script>
function myFunction(idButton) {
  var Div1 = document.getElementById('Div1');
  var Div2 = document.getElementById('Div2');
  var Div3 = document.getElementById('Div3');


 switch(idButton) {
 case 1:
          Div1.style.display = 'block';
          Div2.style.display = 'none';
          Div3.style.display = 'none';
    break;

 case 2:
          Div1.style.display = 'block';
          Div2.style.display = 'block';
          Div3.style.display = 'none';
    break;

 case 3:
          Div1.style.display = 'block';
          Div2.style.display = 'block';
          Div3.style.display = 'block';
    break;

default:
          alert("error.")
        }

   }
</script>
<div style="display:block;">
<div>Div1</div>
<div>Div2</div>
<div>Div3</div>
<div>Div4</div>
<div>Div5</div>
<button onclick="myFunction(1)">Mostrar más</button>
</div>

<div id="Div1" style="display:none;">
<div>Div1</div>
<div>Div2</div>
<div>Div3</div>
<div>Div4</div>
<div>Div5</div>
<button onclick="myFunction(2)">Mostrar más</button>
</div>

<div id="Div2" style="display:none;">
<div>Div1</div>
<div>Div2</div>
<div>Div3</div>
<div>Div4</div>
<div>Div5</div>
<button onclick="myFunction(3)">Mostrar más</button>
</div>

....

La única forma que se me ocurrio es usar los codigos de mostrar y ocultar usando sólo display:block, el problema es que el botón "Mostrar más" del div anterior no puedo ocultarlo y ademas que debo modificar TODO el código cada vez que agregó un nuevo div.

3 respuestas 3

1

Primero observa que no tienes un div3 y lo estas tratando de ocultar Div3.style.display = 'none'; eso es null y te dara error, Puedes usar u contador para ver la cantidad de clic que ha dado el usuario:

<script>
        var clic =0;
        function myFunction(idButton) {
            clic++;
            var Div1 = document.getElementById('Div1');
            var Div2 = document.getElementById('Div2');
            var btn = document.getElementById('btn');
            
            console.log(clic)
            clic = clic<3 ? clic : 1

            switch(clic) {
               case 1:
               Div1.style.display = 'block';
               Div2.style.display = 'none';
               
               
               break;

               case 2:
               Div1.style.display = 'block';
               Div2.style.display = 'block';
               
               break;

               case 3:
               Div1.style.display = 'block';
               Div2.style.display = 'block';
               
               
               break;

               default:
               alert("error.")
           }

       }
   </script>


   <div style="display:block;">
    <div>Div1</div>
    <div>Div2</div>
    <div>Div3</div>
    <div>Div4</div>
    <div>Div5</div>
</div>
<div id="Div1" style="display:none;">
    <div>Div1</div>
    <div>Div2</div>
    <div>Div3</div>
    <div>Div4</div>
    <div>Div5</div>
</div>
<div id="Div2" style="display:none;">
    <div>Div1</div>
    <div>Div2</div>
    <div>Div3</div>
    <div>Div4</div>
    <div>Div5</div>
</div>
<button id="btn" onclick="myFunction(1)">Mostrar más</button>

0

con javascript puedes añadir nuevos div's al div padre, pero debes de sacar el boton del div padre y ponerlo debajo, algo asi:

<div style="display:block;" id="padre">
<div>Div1</div>
<div>Div2</div>
<div>Div3</div>
<div>Div4</div>
<div>Div5</div>
</div>
<button onclick="myFunction()">Mostrar más</button>

y con javascript obtienes el contenido del div padre y le concatenas los nuevos divs que vas a agregar algo asi:

function myFunction(){
   var div = document.getElementById("padre");
   var content = div.innerHTML;

   var new_content = "<div>Div6</div><div>Div7</div><div>Div8</div><div>Div9</div><div>Div10</div>";

   div.innerHTML = content + new_content;
}

No sé si exactamente este código vaya a funcionar, pero lógicamente así seria

0

Puedes ir agregando div a medida que vas clickeando el botón y validar si ya existen x número de divs para bloquear el botón u ocultarlo y así no mostrar más divs, te dejo este código y espero te ayude en algo o te de una idea de como lograr tu objetivo:

//Iniciamos variable que controlará los nombres de los div
var numeroDiv = '3';

function mostrarMas(element) {

  //Guardamos los div que queremos agregar, en este caso sólo 2
  let divsNuevos =
    `<div>Div${numeroDiv++}</div>
   <div>Div${numeroDiv++}</div>`;

  //Agregamos los div al contenedor que queremos
  $('#divPadre').append(divsNuevos);

  //Validamos si los div ya excedieron los 8 para no permitir añadir más
  if ($('#divPadre').children('div').length > 8) {
    
    //Bloqueamos el botón 'mostrar más'
    $(element).prop('disabled', true);
    alert('Ya no puedes agregar más <div>');
  }

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="divPadre">
  <div>Div1</div>
  <div>Div2</div>
</div>
<button onclick="mostrarMas(this)">Mostrar más</button>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.