Resizing divs on visibility toggle (in HTML + pure JS)?

user_12064467 0
Viewed 227

I have three divs, and three checkboxes to toggle the visibility of each of these divs. However, I would like each div to resize when a toggle id detected. For instance, if all three divs have their respective checkboxes to be toggled to "on," then each div should take up approximately 1/3 of the space on the screen. If only two checkboxes are checked, then their respective divs should each take up 1/2 of the space on the screen, and if only one is checked, then the div should expand to fill the available area.

The code I have so far is available at this CodePen and in the snippet below:

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>

The CodePen I linked above is a working example of the toggle effect with checkboxes, but I can't figure how to edit the JS functions to resize the divs.

Any help would be greatly appreciated!

css html javascript
1 Answers

Use display: flex; on the outer div and set flex: 1; on the children (I shortened the JS and 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>

user_78678220
Related