I have this grid with 3 columns, and when i click one of the divs it’ll go down a row and span the whole row, it also closes back up when i click on it again. Also, when I open a different div, it’ll close all the other ones if theyre open. so that there’s only one open at a time
document.querySelectorAll('#gridALBUM > div').forEach((D,_,A)=>
{
D.addEventListener('click', e=>
{
if (D.classList.toggle('span'))
A.forEach(d =>{ if(d!=D) d.classList.remove('span') });
})
})#gridALBUM {
background : lightblue;
margin : 50px auto;
max-width : 908px;
display : grid;
grid-gap : 0 4px;
grid-template-columns: repeat(3, 300px);
}
#gridALBUM > div {
border : 1px solid black;
display : flex;
}
#gridALBUM > div:not(.span) > div {
display : none;
}
#gridALBUM > div.span {
grid-column : 1 / 4;
background-color : #47479c;
}<div id="gridALBUM">
<div id="one" ><h1>1</h1> <div><h2> one </h2></div></div>
<div id="two" ><h1>2</h1> <div><h2> two </h2></div></div>
<div id="three" ><h1>3</h1> <div><h2> three </h2></div></div>
<div id="four" ><h1>4</h1> <div><h2> four </h2></div></div>
<div id="five" ><h1>5</h1> <div><h2> five </h2></div></div>
<div id="six" ><h1>6</h1> <div><h2> six </h2></div></div>
<div id="seven" ><h1>7</h1> <div><h2> seven </h2></div></div>
<div id="eight" ><h1>8</h1> <div><h2> eight </h2></div></div>
<div id="nine" ><h1>9</h1> <div><h2> nine </h2></div></div>
<div id="ten" ><h1>10</h1><div><h2> ten </h2></div></div>
</div>is there a way so that when I click on one of them, itll bring the next one up to fill the gap? I don’t know if that makes sense… Let’s say I click #two, there’ll be two empty spaces besides #one.. is there a way to bring #three and #four to fill up that space?