Ширина складной панели

Question

Хотелось бы, чтобы нижняя панель расширилась до col-md-12, когда верхняя панель свернута, и когда пользователь снова расширяет верхнюю панель, ширина нижней панели возвращается к col-md-8.

Я довольно новичок в этом, но это мой код:

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


function secondPanelResize() {
  if (panel.style.height <= "45") {
    panel1.classList.remove("col-md-8");
    panel1.classList.add("col-md-12");
  } else {
    panel1.classList.remove("col-md-12");
    panel1.classList.add("col-md-8");
  }
}

<div class="panel-group col-md-12">
  <div class="col-md-8" id="panel">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" href="#collapse1" onclick="secondPanelResize()" id="collapse">Collapsible panel</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body" id="panelbody">Panel Body</div>
      </div>
    </div>
  </div>
  
  <div class="col-md-8" id="panel1">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" href="#collapse2">Collapsible panel</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse in">
        <div class="panel-body" id="panelBody">Panel Body</div>
      </div>
    </div>
  </div>
</div>

Мне удалось увеличить ширину нижней панели, когда верхняя панель закрыта, но я не могу понять, как уменьшить ширину до ееоригинал, когда верхняя панель открыта.

Answer 1

Вот базовый пример добавления и удаления классов CSS с помощью JS.

function topPanel() {
  var topPanelEle = document.getElementById('topPanel')
  var bottomPanelEle = document.getElementById('bottomPanel')
  
  if (!topPanelEle.classList.contains('expanded')) { //To aviod multiple clicks
    topPanelEle.classList.add('expanded');
  }
  bottomPanelEle.classList.remove('expanded');
}

function bottomPanel() {
  var topPanelEle = document.getElementById('topPanel')
  var bottomPanelEle = document.getElementById('bottomPanel')
  
  if (!bottomPanelEle.classList.contains('expanded')) { //To aviod multiple clicks
    bottomPanelEle.classList.add('expanded');
  }
  topPanelEle.classList.remove('expanded');
}

.top-panel {
  padding: 16px;
  background-color: red;
}

.bottom-panel {
  padding: 16px;
  background-color: blue;
}

.expanded {
  height: 100px;
}

<a href="javascript:topPanel()">Expand Top Panel</a>
<div id="topPanel" class="top-panel">Top Panel</div>
<a href="javascript:bottomPanel()">Expand Top Panel</a>
<div id="bottomPanel" class="bottom-panel">Bottom Panel</div>

Теперь, в вашем случае, я не совсем уверен, потому что CSS не был задан, но в ваших добавленных классах (например, expanded в моем случае)) может содержать height: 100% !important и переопределять CSS-код по умолчанию, который был добавлен (например, top-panel или bottom-panel в моем случае), что может быть что-то вроде height: 50%.Я также считаю, что проще использовать 2 функции или иметь 1 с параметром, поэтому я знаю, является ли это верхняя или нижняя панель прямо от того места, где она вызывается, если только у вас нет кнопки 1 в качестве переключателя.