Div's width adjusting if another div is hidden or not? - html

Question

In my body i want two divs with content side by side that each has a width of 50% of the screen. But i want to be able to hide/show the first div and then the second divs width responds to this changing it's width to 100% or 50%. Filling the body or the rest of the body depending on if the first div is hidden.
Any ideas how to do this? (I know how to show/hide with jquery, im thinking of the HTML)

Answer 1

Use floating only to the first element, and let the second one fit the remaining space.
Then, if the element is visible with width:50%, the second one will fill the other half. But if the first one is hidden, the second one will fill whole screen.
Demo
HTML:
<input type="button" id="btn" value="toggle" />
<div id="wrapper">
<div id="left">Foo</div>
<div id="right">Bar</div>
</div>
CSS:
#wrapper, #right {
overflow: hidden;
}
#left {
float: left;
width: 50%;
background-color: #ffa;
}
#right {
background-color: #faf;
}
.hide {
display: none;
}
JS:
var left = document.getElementById('left');
document.getElementById('btn').onclick = function() {
left.className = left.className ? '' : 'hide';
};

Answer 2

Another possibility: use display: table-cell. This has the advantage over floats that both columns will have same height, and setting wrapper's height will also set it for both columns.
Demo
HTML:
<input type="button" id="btn" value="toggle" />
<div id="wrapper">
<div id="left">Foo</div>
<div id="right">Bar</div>
</div>
CSS:
#wrapper {
display: table;
width: 100%;
}
#left, #right {
display: table-cell;
}
#left {
background-color: #ffa;
}
#right {
background-color: #faf;
}
.hide {
display: none !important;
}
JS:
var left = document.getElementById('left');
document.getElementById('btn').onclick = function() {
left.className = left.className ? '' : 'hide';
};

Answer 3

You can use flexbox and JQuery to do this with as many divs as you'd like.
https://jsfiddle.net/L8kfty5n/5/
function hideandshow() {
if ($('.hide').is(":checked"))
$("#div1").show();
else
$("#div1").hide();
}
.container {
display: flex;
flex-flow: row nowrap;
}
#div1,
#div2,
#div3 {
flex-grow: 1;
flex-basis: calc(100% / 3);
border: 1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="container">
<div id="div1">This disappears</div>
<div id="div2">This grows</div>
<div id="div3">This grows too</div>
</div>
<input class="hide" type="checkbox" name="hide" value="1" onchange="hideandshow()" checked/>