HTML two-level accordion menu hiding and not adding content-CodePudding

I'm trying to do a two level accordion menu. The first level works fine but when I add the second level, the second level content hiddes in the first level Section 2 title. Someone knows how can I solve this?

My html code is this :

<div ></div>
    <button ><p >Provisioning</p></button>
    <div >
        <button >Set Variables</button>
        <div >
            <p>Lorem ipsum...</p>
        </div>
        <button >Get Variables</button>
        <div >
            <p>Lorem ipsum...</p>
         </div>
         <button >Reset</button>
         <div >
             <p>Lorem ipsum...</p>
         </div>
         <button >Get Base Report</button>
         <div >
             <p>Lorem ipsum...</p>
         </div>
         </div>
    
     <button ><p >Availability</p></button>
     <div >
         <p>Lorem ipsum...</p>
     </div>

My CSS :

.accordion {
        background-color: #eee;
        color: #444;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        text-align: left;
        border: none;
        outline: none;
        transition: 0.4s;
    }

    .sub-accordion {
        background-color: rgb(181, 255, 191);
        color: #444;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        text-align: center;
        border: none;
        outline: none;
        transition: 0.4s;
    }

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

    .sub-active, .sub-accordion:hover {
        background-color: rgb(104, 255, 124);;
    }

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

    .sub-panel {
        padding: 0 18px;
        background-color: lightblue;
        max-height: 0;
        overflow: hidden;
        transform: max-height 0.2s ease-out;
    }

    .container-wrapper {
        padding: 20pt;
    }

    .title-sections {
        font-size: 20px;
    }

And finally my JS, here is the problem. I copy pasted the same code of the first level accordion to make the second level accordion and there's a problem with the height but I don't quite know which part needs to be changed :

var acc = document.getElementsByClassName("accordion");
var i;
var sub_acc = document.getElementsByClassName("sub-accordion");
var j;


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

for (j = 0; j < sub_acc.length; j  ) {
  sub_acc[j].addEventListener("click", function() {
    this.classList.toggle("sub-active");
    var sub_panel = this.nextElementSibling;
    if (sub_panel.style.maxHeight) {
      sub_panel.style.maxHeight = null;
    } else {
      sub_panel.style.maxHeight = sub_panel.scrollHeight   "px";
    }
  });
}

CodePudding user response：

Here is the fix in Javascript. The solution is just looking for the active accordion and setting its max height again in sub-accordion click logic

const activeAccordion = document.getElementsByClassName("accordion active")[0]
var panel = activeAccordion.nextElementSibling;
panel.style.maxHeight = panel.scrollHeight   "px";

Fully integrated with your Javascript

var acc = document.getElementsByClassName("accordion");
var i;
var sub_acc = document.getElementsByClassName("sub-accordion");
var j;


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

for (j = 0; j < sub_acc.length; j  ) {
  sub_acc[j].addEventListener("click", function() {
    this.classList.toggle("sub-active");
    var sub_panel = this.nextElementSibling;
    if (sub_panel.style.maxHeight) {
      sub_panel.style.maxHeight = null;
    } else {
      sub_panel.style.maxHeight = sub_panel.scrollHeight   "px";
    }

    //The change is here
    const activeAccordion = document.getElementsByClassName("accordion active")[0]
    var panel = activeAccordion.nextElementSibling;
    panel.style.maxHeight = panel.scrollHeight   "px";
  });
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.sub-accordion {
  background-color: rgb(181, 255, 191);
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: center;
  border: none;
  outline: none;
  transition: 0.4s;
}

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

.sub-active,
.sub-accordion:hover {
  background-color: rgb(104, 255, 124);
  ;
}

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

.sub-panel {
  padding: 0 18px;
  background-color: lightblue;
  max-height: 0;
  overflow: hidden;
  transform: max-height 0.2s ease-out;
}

.container-wrapper {
  padding: 20pt;
}

.title-sections {
  font-size: 20px;
}

<div ></div>
<button ><p >Provisioning</p></button>
<div >
  <button >Set Variables</button>
  <div >
    <p>Lorem ipsum...</p>
  </div>
  <button >Get Variables</button>
  <div >
    <p>Lorem ipsum...</p>
  </div>
  <button >Reset</button>
  <div >
    <p>Lorem ipsum...</p>
  </div>
  <button >Get Base Report</button>
  <div >
    <p>Lorem ipsum...</p>
  </div>
</div>

<button ><p >Availability</p></button>
<div >
  <p>Lorem ipsum...</p>
</div>

CodePudding user response：

For Your HTML you need to wrap the whole thing in container-wrapper here's the code for it:

<div >
  <button >
    <p >Provisioning</p>
  </button>
  <div >
    <button >Set Variables</button>
    <div >
      <p>Lorem ipsum...</p>
    </div>
    <button >Get Variables</button>
    <div >
      <p>Lorem ipsum...</p>
    </div>
    <button >Reset</button>
    <div >
      <p>Lorem ipsum...</p>
    </div>
    <button >Get Base Report</button>
    <div >
      <p>Lorem ipsum...</p>
    </div>
  </div>

  <button >
    <p >Availability</p>
  </button>
  <div >
    <p>Lorem ipsum...</p>
  </div>
</div>

and for your CSS:

.container-wrapper {
  padding: 20pt;
  //add these two lines
  display: flex; 
  flex-direction: column;
}