截面尺寸可折叠

Question

我有多个使用可折叠工具的div，我希望将它们放入一个区域中，该部分会在单击该可折叠工具时更改大小，该可折叠工具位于底部，因此大小会发生变化

我尝试了一个脚本，该脚本在单击可折叠按钮时更改了部分的大小，只是根本没有反应。

var drop = document.getElementsByClassName("drop");
var panel = document.getElementById("panel");
var i;
	
for (i = 0; i < drop.length; i++) {
  drop[i].addEventListener("click", function() {
  this.classList.toggle("active");
  var collapse = this.previousElementSibling;
  if (collapse.style.maxHeight) {
    collapse.style.maxHeight = null;
    } else {
    collapse.style.maxHeight = collapse.scrollHeight + "px";
    }
  });
}
for (i = 0; i < drop.length; i++) {
  drop[i].addEventListener("click", function() {
  if (panel.style.maxHeight) {
    panel.style.maxHeight = null;
    } else {
    panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

#panel	{
	background-color: black;
	float: center;
	position: relative;
	width: 500px;
	height: 500px
}

#box1	{
	background-color: red;
	position: absolute;
	bottom: 0;
	left: 0;
}

#box2	{
	background-color: yellow;
	position: absolute;
	bottom: 0;
	right: 0;
	float: right;
}

.drop {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .drop:hover {
  background-color: #ccc;
}

.collapse {
  padding: 0 18px;
  background-color: red;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

<div id=panel>
	<div id="box1">
		<br>this is red</br>
		<div class="collapse">
			<p>a drop</p>
		</div>
		<button class="drop">view more</button>
	</div>
	<div id="box2">
		<br>this is yellow</br>
		<div class="collapse">
			<p>a drop</p>
		</div>
		<button class="drop">view more</button>
	</div>
</div>

我希望在触发可折叠对象时整个部分向下扩展，相反，什么也没有发生。