title: Resize panel to col-md-6
body: <p>I'm fairly new at learning to code and I'm just playing around with something. I have a panel and I have a button above it to resize the panel.</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var panel = document.getElementById("panel");
  
  function panelResize() {
    if (panel.style.width &gt;= "75%") {
      panel.style.width = "50%";
    } else {
      panel.style.width = "75%";
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button style="margin:10px" onclick="panelResize()"&gt;button&lt;/button&gt;
  
  &lt;div class="col-md-12"&gt;
    &lt;div class="col-md-6" id="panel"&gt;
      &lt;div class="panel panel-default"&gt;
        &lt;div class="panel-heading"&gt;
          &lt;p&gt;panel heading&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="panel-body"&gt;
          &lt;p&gt;panel body&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I know this code may not be 100% so I apologize.</p>
  
  <p>I would like the button to be able to increase the width of the panel to <code>col-md-8</code> for example, then to return back to <code>col-md-6</code> with the same button if possible.</p>