1

Quiero abrir varias cajas con un solo botón para no crear tantos, pero quiero que el botón vaya abriendolas por click, es decir un click primer caja y así sucesivamente.

cómo puedo hacer para que funcione como yo quiero usando jquery?

$('#open').click(function(){
  $('.box-size').css({
    "display": "flex",
    "justify-content": "center"
  });
});	
.box-size{
width: 100%;
display: none;
}
.box{
width: 100px;
height: 100px;
background-color: #ff0;
margin: 10px;
}
.boton-box{
width: 100%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='box-size'>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

</div>
<br>
<div class="boton-box"><button id="open">Abrir cajas</button></div>

1
  • Cuando te refieres a abrirlas que quieres decir realmente??, que se muestre la primera en el primer click, la segunda en el segundo, y asi el 24 abr. 2019 a las 21:47

2 respuestas 2

2

Aqui una respuesta probada pero no se si es exactamente lo que quieres

num = 0;
box = "#box" + num;
    $('#open').click(function(){
num=num+1;
box="#box" + num;
    $(box).css({
    "display": "flex",
    "justify-content": "center"
  });
});	
.box-size{
width: 100%;
/*display: none;*/
display:flex;
    justify-content: center;
}
.box{
width: 100px;
height: 100px;
background-color: #ff0;
margin: 10px;
}
#box1,#box2,#box3 {display:none;}
.boton-box{
width: 100%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='box-size'>

<div class="box" id="box1">1</div>

<div class="box" id="box2">2</div>

<div class="box" id="box3">3</div>

</div>
<br>
<div class="boton-box"><button id="open">Abrir cajas</button></div>

1

Puedes utilizar una variable global como contador. Tendras que verificar si la caja que quieres abrir existe antes de intentar abrirla. Te dejo un ejemplo sin verificacion:

var box = 0;
$('#open').click(function(){
  $($('.box-size')[box]).css({
    "display": "flex",
    "justify-content": "center"
  });
  box++;
});
.box-size{
width: 100%;
display: none;
}
.box{
width: 100px;
height: 100px;
background-color: #ff0;
margin: 10px;
}
.boton-box{
width: 100%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='box-size'>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

</div>
<div class='box-size'>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

</div>
<br>
<div class="boton-box"><button id="open">Abrir cajas</button></div>

0

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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