Jquery – how to remove class from selected dom's siblings? how to open a div and have all the other ones close? do i use siblings() or what

i have this grid with 3 columns, and i wanted to make it so that 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. and i got that to work. but i wanted to make it so that when i open a different div, itll close all the other ones if theyre open? so that theres only one open at a time? how would i do that?

<div id="gridALBUM">
  <div id="one"   onclick="toggles1()">  <h1>1</h1> <div><h2>one  </h2></div></div>
  <div id="two"   onclick="toggles2()">  <h1>2</h1> <div><h2>two  </h2></div></div> 
  <div id="three" onclick="toggles3()">  <h1>3</h1> <div><h2>three</h2></div></div>
  <div id="four"  onclick="toggles4()">  <h1>4</h1> <div><h2>four </h2></div></div>
  <div id="five"  onclick="toggles5()">  <h1>5</h1> <div><h2>five </h2></div></div>
  <div id="six"   onclick="toggles6()">  <h1>6</h1> <div><h2>six  </h2></div></div>
  <div id="seven" onclick="toggles7()">  <h1>7</h1> <div><h2>seven</h2></div></div>
  <div id="eight" onclick="toggles8()">  <h1>8</h1> <div><h2>eight</h2></div></div>
  <div id="nine"  onclick="toggles9()">  <h1>9</h1> <div><h2>nine </h2></div></div>
  <div id="ten"   onclick="toggles10()"> <h1>10</h1> <div><h2>ten </h2></div></div>
</div>

also, i have these other divs next to the h1 thatll have information in it, but i only want it to show if its parent div got expanded and spanned the whole row? so i want to change the display from hidden to block only IF it got opened.. i know i have to add or remove class hidesINFO but like, would i have to make a function for each div to do that?

#gridALBUM {
  margin: 50px auto;
  max-width: 908px;
  display: grid;
  grid-gap: 0 4px;
  grid-template-columns: repeat(3, 300px);
  background-color: lightblue;
}

#gridALBUM > div {
  border: 1px solid black;
  display: flex;
}

.hidesINFO {
  display: none;
}

.span {
  grid-column: 1 / 4;
  background-color: blue;
}

also, is there a better way to do the code below? instead of having to have the same exact code but with different IDs for each to target each div? because im gonna have to add more divs and i dont want to have to copy and paste each function when theyre really only doing the same thing, just to different elements

function toggles1() {
  document.getElementById("one").classList.toggle("span"); } 

function toggles2() {
  document.getElementById("two").classList.toggle("span"); } 

function toggles3() {
  document.getElementById("three").classList.toggle("span"); } 

function toggles4() {
  document.getElementById("four").classList.toggle("span"); } 

function toggles5() {
  document.getElementById("five").classList.toggle("span"); } 

function toggles6() {
  document.getElementById("six").classList.toggle("span"); } 

function toggles7() {
  document.getElementById("seven").classList.toggle("span"); } 

function toggles8() {
  document.getElementById("eight").classList.toggle("span"); } 

function toggles9() {
  document.getElementById("nine").classList.toggle("span"); } 

function toggles10() {
  document.getElementById("ten").classList.toggle("span"); } 

do i use siblings() to like, remove selectors? like would this work?

function toggles2() {
  document.getElementById("two").classList.toggle("span"); 
  document.getElementById("two").siblings().classList.remove("span");
  document.getElementById("two").siblings().child[1].classList.remove("hidesINFO");
}