Javascript 手风琴中的手风琴

我正在尝试在另一个手风琴中嵌入手风琴，但它不起作用，嵌入的手风琴将仅扩展到第一个扩展手风琴的大小，我需要添加额外的空间以显示内容，非常感谢任何帮助

CSS

HTML

背景
内容
项目1
内容

JavaScript

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
  panel.style.maxHeight = null;
} else {
  panel.style.maxHeight = panel.scrollHeight + "px";
} 
}
}

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i

button.accordion{
背景色：#eee；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
过渡：0.4s；
}
按钮。手风琴。激活，按钮。手风琴：悬停{
背景色：#ddd；
}
分区小组{
填充：0 18px；
显示：无；
背景色：白色；
}

手风琴
第二节
第一节

内容

第三节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

<button class="accordion">Background</button>
<div class="panel">
content
<button class="accordion">item 1</button>
<div class="panel">
content
</div>
</div>

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
  panel.style.maxHeight = null;
} else {
  panel.style.maxHeight = panel.scrollHeight + "px";
} 
}
}