Изменение размера div при переключении видимости (в HTML + чистый JS)?

Question

У меня есть три блока и три флажка для переключения видимости каждого из этих блоков. Однако я хотел бы, чтобы каждый div изменял размер при обнаружении идентификатора переключения. Например, если у всех трех div есть соответствующие флажки, которые нужно переключить на «on», то каждый div должен занимать примерно 1/3 места на экране. Если отмечены только два флажка, то их соответствующие div должны занимать 1/2 места на экране, а если установлен только один, то div должен расширяться, чтобы заполнить доступную область.

код, который у меня есть до сих пор, доступен по адресу CodePen и в приведенном ниже фрагменте:

function myFunction1() {
  var x = document.getElementById("myDIV-1");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
function myFunction2() {
  var x = document.getElementById("myDIV-2");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
function myFunction3() {
  var x = document.getElementById("myDIV-3");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

#myDIV-1 {
  width: 30%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin: 20px;
  float: left;
}
#myDIV-2 {
  width: 30%;
  padding: 50px 0;
  text-align: center;
  background-color: coral;
  margin: 20px;
  float: left;
}
#myDIV-3 {
  width: 30%;
  padding: 50px 0;
  text-align: center;
  background-color: gold;
  margin: 20px;
  float: left;
}

<p>Click on the checkboxes to toggle the visibility of the divs.</p>

<input type="checkbox" onclick="myFunction1()" checked>Toggle DIV-1</input>
<input type="checkbox" onclick="myFunction2()" checked>Toggle DIV-2</input>
<input type="checkbox" onclick="myFunction3()" checked>Toggle DIV-3</input>

<div>
  <div id="myDIV-1">
  This is my DIV-1 element.
  </div>
  <div id="myDIV-2">
  This is my DIV element.
  </div>
  <div id="myDIV-3">
  This is my DIV element.
  </div>
</div>

CodePen, который я привел выше, является рабочим примером эффекта переключения с флажками, но я не могу понять, как редактировать JS функции для изменения размера div.

Любая помощь будет принята с благодарностью!

Answer 1

Используйте display: flex; на внешнем div и установите flex: 1; на дочерних элементах (я сократил JS и CSS):

function toggle(id){
  var x = document.getElementById(id)
  if (x.style.display === "none") x.style.display = "block"
  else x.style.display = "none"
}

#outer { display: flex; }
#outer div { 
  flex: 1; 
  padding: 50px 0;
  text-align: center;
  margin: 20px;
}

#myDIV-1 { background-color: lightblue; }
#myDIV-2 { background-color: coral; }
#myDIV-3 { background-color: gold; }

<p>Click on the checkboxes to toggle the visibility of the divs.</p>

<input type="checkbox" onclick="toggle('myDIV-1')" checked>Toggle DIV-1</input>
<input type="checkbox" onclick="toggle('myDIV-2')" checked>Toggle DIV-2</input>
<input type="checkbox" onclick="toggle('myDIV-3')" checked>Toggle DIV-3</input>

<div id="outer">
  <div id="myDIV-1">
    This is my DIV-1 element.
  </div>
  <div id="myDIV-2">
    This is my DIV element.
  </div>
  <div id="myDIV-3">
    This is my DIV element.
  </div>
</div>