I am facing a challenge while trying to nest an accordion within another accordion. The issue is that the nested accordion only expands as much as the first accordion, requiring additional space to display its content properly. Any assistance with resolving this problem would be greatly appreciated!
Custom CSS
.accordion-button {
background-color: #73560b;
border: 2px solid #ffc600;
border-radius: 0px 10px 0px 10px;
box-shadow: 7px 7px 5px #cccccc;
color: #fff;
cursor: pointer;
padding: 10px 15px 10px 15px;
margin: 4px 0px 7px 0px;
width: 100%;
font-size: 18px;
transition: 0.4s;
outline: none;
text-align: left;
}
.accordion-button.active, .accordion-button:hover {
background-color: #926c0e;
}
.accordion-button:after {
content: '\002B';
color: #ffc600;
font-weight: bold;
float: right;
}
.accordion-button.active:after {
content: "\2212";
}
.panel-content {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
HTML Structure
<button class="accordion-button">Main Section</button>
<div class="panel-content">
Content for main section
<button class="accordion-button">Subsection 1</button>
<div class="panel-content">
Content for subsection 1
</div>
</div>
JavaScript Code
var accordionButtons = document.getElementsByClassName("accordion-button");
var j;
for (j = 0; j < accordionButtons.length; j++) {
accordionButtons[j].onclick = function() {
this.classList.toggle("active");
var panelContent = this.nextElementSibling;
if (panelContent.style.maxHeight){
panelContent.style.maxHeight = null;
} else {
panelContent.style.maxHeight = panelContent.scrollHeight + "px";
}
}
}