Html Sub-Accordions don't open-CodePudding

I created a sub-accordion to my site, but when I click on it, the text doesn't appear.

I tried to remove the other accordions and modify the js code but the problem remains.

I think that there's a problem in the JavaScript code because the main accordion is working.

I found the tutorial on w3schools. Here is the link: https://w3schools.com/howto/howto_js_accordion.asp

var acc = document.querySelectorAll('.accordion,.subaccordion');
var i;
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";
    }
  });
}

.accordion {
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-family: Poppins;
  font-size: 15px;
  transition: 0.4s;
  margin-top: .15rem;
  background-color:#fafafa;
}

.subaccordion {
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-family: Poppins;
  font-size: 15px;
  transition: 0.4s;
  margin-top: .15rem;
  background-color:#fafafa;
}


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

.accordion:after, .subaccordion:after {
  content: '\002B';
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

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

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

.title {
  font-family: Poppins;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Accordions</title>
    <link rel="stylesheet" href="style.css"></link>
</head>
<body>
    <h1 >Accordions Test</h1>
    <button >Accordion 1</button>
    <div >
        <button >Subaccordion 1</button>
        <div >
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        </div>
    </div>

    <button >Accordion 2</button>
    <div >
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    </div>
</body>
<script src="script.js" charset="utf-8"></script>
</html>

CodePudding user response：

the issue come from maxHeight is still affected to parent node when you click on sub accordion

an idea can be to wait the end of transition on panel to recalculate maxHeight on parent

panel.addEventListener('transitionend', () => {
    panel.parentNode.style.maxHeight = panel.parentNode.scrollHeight   "px";
});

[...document.querySelectorAll('.accordion, .subaccordion')].forEach(acc => {
  acc.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";
    }
  });
});

[...document.querySelectorAll('.panel')].forEach(panel => {
  panel.addEventListener('transitionend', () => {
    panel.parentNode.style.maxHeight = panel.parentNode.scrollHeight   "px";
  });
});

.accordion {
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-family: Poppins;
  font-size: 15px;
  transition: 0.4s;
  margin-top: .15rem;
  background-color: #fafafa;
}

.subaccordion {
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-family: Poppins;
  font-size: 15px;
  transition: 0.4s;
  margin-top: .15rem;
  background-color: #fafafa;
}

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

.accordion:after,
.subaccordion:after {
  content: '\002B';
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

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

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

.title {
  font-family: Poppins;
}

<h1 >Accordions Test</h1>
<button >Accordion 1</button>
<div >
  <button >Subaccordion 1</button>
  <div >
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  </div>
</div>

<button >Accordion 2</button>
<div >
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>