Resize panel to col-md-6

Question

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.

Here is my code:

var panel = document.getElementById("panel");

function panelResize() {
  if (panel.style.width >= "75%") {
    panel.style.width = "50%";
  } else {
    panel.style.width = "75%";
  }
}

<button style="margin:10px" onclick="panelResize()">button</button>

<div class="col-md-12">
  <div class="col-md-6" id="panel">
    <div class="panel panel-default">
      <div class="panel-heading">
        <p>panel heading</p>
      </div>
      <div class="panel-body">
        <p>panel body</p>
      </div>
    </div>
  </div>
</div>

I know this code may not be 100% so I apologize.

I would like the button to be able to increase the width of the panel to col-md-8 for example, then to return back to col-md-6 with the same button if possible.

Answer 1

You can do this

var panel = document.getElementById("panel");
if(panel.classList.contains('col-md-6')){
    panel.classList.remove('col-md-6');
    panel.classList.add('col-md-8');
} else {
   panel.classList.remove('col-md-8');
   panel.classList.add('col-md-6');
}