Аккордеонный аккорд внутри аккордеона

Question

Я пытаюсь сделать вложенный сворачиваемый список. Я могу сделать это на одном уровне.

Что мне нужно:

когда мы нажимаем на элемент 1, должно отображаться:

элемент a элемент b элемент c элемент 1.1 как расширяемая ссылка (когда мы щелкаем здесь, он должен раскрывать элементы 1.a и элемент 1.b) элемент 2.1 как расширяемую ссылку (когда мы щелкаем здесь, он должен свернуть раздел 1.1 и развернуть элемент 1.2.a и п.1.2, б)

var col1 = document.getElementsByClassName('collapsible');
let lastClick;
let content;

[...col1].forEach(col => {
  col.addEventListener('click', function() {
    if (this == lastClick && this.classList.contains('active')) {
      this.classList.remove('active');
      content.style.maxHeight = null;
      return;
    }
    [...col1].forEach(col => {
      col.classList.remove('active')
      col.nextElementSibling.style.maxHeight = null;
    });
    this.classList.add('active');
    content = this.nextElementSibling;
    content.style.maxHeight = content.scrollHeight + "px";
    lastClick = this;
  });
})

* {box-sizing: border-box;}
html, body{
  min-height: 100%;min-width:100%;
}

body{
    margin: 0;
}

.centered {
  position: absolute;
  margin-top:30px;
  left: 13%;
  color:white;
  font-weight: bold;
  font-size:35px;
  height:auto;
  display:inline-block;
}

@media (max-width: 1030px) {
  .centered {
    float: none;
    display: block;
    text-align: left;
    }
  
 #container {
  display:flex;
  margin-left:50px;
  align-items: center;
}  
}

.column {
  padding: 30px;
  height: 200px; 
  margin: -20px;
  width: 429px;
  height: 120px;
  border-radius: 10px;
  display: inline-block;
  border: 2px #e6e6e6;
  padding-left: 48px;
 }
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin-top: 10px;
  height:55px;

}

.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
  margin-top: -30px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 40px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
  margin:0px;
}

#container {
  display:flex;
  margin-left:10px;
  align-items: center;
  margin-top:-12px;
}
#container > * {
  margin-right: 15px;
}

<div class="maincontainer">

<button class="collapsible">
  <span id="container">
      <span class="sub-container">Item 1</span>
  </span>
</button>
<div class="content">
 <div class="column">
    <div class="row">
   <div class="card-heading"><h4>item b</h4></div>
    </div>
   </div>
 

 <div class="column">
    <div class="row">
     <div class="card-heading"><h4>item a</h4></div>
    </div>
   </div>
   
   <div class="column">
    <div class="row">
   <div class="card-heading"><h4>item b</h4></div>
    </div>
   </div>
  <div class="sub-heading">
  <h2>item 1.1</h2>
</div>
<div class="column">
    <div class="row">
   <div class="card-heading"><h4>item 1.a</h4></div>
    </div>
   </div>
 <div class="column">
    <div class="row">
   <div class="card-heading"><h4>item 1.b</h4></div>
    </div>
   </div>
<div>
<div class="sub-heading">
  <h2 style="text-align:center;">Item 1.2</h2>
</div>
</div>
 <div class="column">
    <div class="row">
   <div class="card-heading"><h4>item 1.2.a</h4></div>
    </div>
   </div>
 <div class="column">
    <div class="row">
   <div class="card-heading"><h4>item 1.2.b</h4></div>
    </div>
   </div>
<div>