Изменить размер панели до col-md-6 - PullRequest
Новая
       10

Изменить размер панели до col-md-6

0 голосов
/ 21 ноября 2018

Я довольно новичок в изучении кода и просто играю с чем-то.У меня есть панель, и у меня есть кнопка над ней, чтобы изменить ее размер.

Вот мой код: 

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>

Я знаю, что этот код не может быть на 100%, поэтому я прошу прощения.

Я бы хотел, чтобы кнопка могла увеличивать ширинунапример, панель на col-md-8, а затем, если возможно, вернуться на col-md-6 с той же кнопкой.

1 Ответ

0 голосов
/ 21 ноября 2018

Вы можете сделать это 

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');
}
...