Collapsible Panel Width

Question

I would like the bottom panel to expand its width to col-md-12when the top panel is collapsed, and when the user expands the top panel again the width of the bottom panel goes back to col-md-8.

I'm fairly new at this, but this is my code so far:

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>

I've managed to make the bottom panel expand its width when the top panel is closed, but I cannot figure out how to make the width reduce to its original when the top panel is open.

Answer 1

Here's a basic example of adding and removing CSS classes with 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>

Now for in your case I'm not entirely sure because no CSS was given but in your added classes (like expanded in my case) could contain height: 100% !important and override the default CSS that was added (like top-panel or bottom-panel in my case) which could be something like height: 50%. I also find it easier using 2 functions or having 1 with a parameter so I know whether it's the top or bottom panel straight from where its being called, unless you have 1 button as a toggle.