title: div width adjusting to 100% if another div is hidden
body: <p>How do I set the width of <code>#leftdiv</code> to 100% when <code>#rightdiv</code> is hidden, and when the button is clicked, both <code>&lt;div&gt;</code>s should be next to each other. </p>
  
  <p>I already got both <code>&lt;div&gt;</code>s next to each other on the button click, but I wanted to expand <code>#leftdiv</code> to 100% when <code>#rightdiv</code> is hidden.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function toggleSideBar() {  
      var div = document.getElementById('rightdiv');
      if (div.style.display !== 'none') {
          div.style.display = 'none';
      } else {
          div.style.display = 'block';
      }  
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="button" id="btn" value="toggle" onclick="toggleSideBar()" /&gt;
      &lt;div id="main-content"&gt;
          &lt;div id="leftdiv"&gt;selectable&lt;/div&gt;
          &lt;div id="rightdiv"&gt;right panel&lt;/div&gt;
      &lt;/div&gt;`</code></pre>
  </div>
  </div>
  </p>