div width adjusting to 100% if another div is hidden

Question

How do I set the width of #leftdiv to 100% when #rightdiv is hidden, and when the button is clicked, both <div>s should be next to each other.

I already got both <div>s next to each other on the button click, but I wanted to expand #leftdiv to 100% when #rightdiv is hidden.

function toggleSideBar() {		
    var div = document.getElementById('rightdiv');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    } else {
        div.style.display = 'block';
    }		
};

#leftdiv
{
   border: solid medium thick;
   float: left;
   display: inline-block;
   background-color: #ffc;
   /*border: 1px solid red;*/
}

#rightdiv
{
   width: 50%;
   border: solid medium thick;
   background-color: #ffa;
   display: none;
   float:right;
}

<input type="button" id="btn" value="toggle" onclick="toggleSideBar()" />
    <div id="main-content">
        <div id="leftdiv">selectable</div>
        <div id="rightdiv">right panel</div>
    </div>`

Answer 1

I would just use flex box for this:

HTML

<input type="button" id="btn" value="toggle" onclick="toggleSideBar()" />
<div id="main-content">
  <div id="leftdiv">selectable</div>
  <div id="rightdiv">right panel</div>
</div>

CSS

#main-content {
  display: flex;
  flex-flow: row nowrap;
}

#leftdiv {
  background-color: #ffc;
  flex: 1 1 auto;
  border: 1px solid red;
}

#rightdiv {
  flex: 1 1 auto;
  background-color: #ffa;
  display: none;
  border: 1px solid green;
}

JS

function toggleSideBar() {  
    var div = document.getElementById('rightdiv');

    if (div.style.display !== 'none') {
        div.style.display = 'none';
    } else {
        div.style.display = 'block';
    }
};

The main reason your example did not work as you wanted is the use of float. Floating causes an element to only occupy the space needed by its content. Using float, you have to use width:100% for the left container to fix this. To make it switch dynamically from 50% to 100% width it would also be necessary to switch the style between those two in your toggle function.

With flexbox all of this is no longer necessary as its children get ordered automatically by the direction you want, in this case as a row. Setting flex: 1 1 auto; for both containers makes them grow and shrink equally to occupy all the space they can get. (flex: 1 0 auto; would also work here, as the shrinking behavior does not make any difference in this example.)