I want to open several boxes with a single button so as not to create so many, but I want the button to open them per click, that is, a first box click and so on.
how can i make it work the way i want using 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>
Here's a proven answer but I don't know if it's exactly what you want
You can use a global variable as a counter. You will have to check if the box you want to open exists before trying to open it. I leave you an example without verification: