Как я уже написал в комментариях, у Вас всё открывается, просто его не видно из-за max-height: 158px;
на первом .content.
Значит нужно сделать, чтобы при открытии каждого следующего .content
- max-height
рассчитывалось и менялось и для предыдущих.
Внесем необходимые правки.
Создаем массив и добавляем в него значения высоты каждого .content в аккордеоне:
let heightArray = [];
for (let i = 0; i < coll.length; i++) {
heightArray.push(coll[i].nextElementSibling.scrollHeight);
}
При открытии какой-либо кнопки нам необходимо также менять высоту всех предыдущих .content для корректного отображения аккордеона, высчитываем и задаем новую высоту путем сложения предыдущих значений высоты:
for (let prevContent = 0; prevContent < i; prevContent++) {
let sumHeight = 0;
for (let prevContent = 0; prevContent <= i; prevContent++) {
sumHeight = sumHeight + heightArray[prevContent];
}
coll[prevContent].nextElementSibling.style.maxHeight = sumHeight + 'px';
}
Также добавим закрытие всего внутреннего контента при закрытии родительского:
if (!this.classList.contains('active')) {
for (let x = i + 1; x < coll.length; x++) {
coll[x].classList.remove("active");
coll[x].nextElementSibling.style.maxHeight = null;
}
}
Мой рабочий вариант: (думаю можно сделать поизящнее, но логика должна быть ясна)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,
.collapsible:hover {
background-color: #555;
}
.collapsible:after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<button class="collapsible">Open Section 3</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
<button class="collapsible">Open Section 3</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
<button class="collapsible">Open Section 3</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
<button class="collapsible">Open Section 3</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
<button class="collapsible">Open Section 3</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
</div>
</div>
</div>
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
let heightArray = [];
for (let i = 0; i < coll.length; i++) { // добавляем значения высоты каждого .content в массив по порядку
heightArray.push(coll[i].nextElementSibling.scrollHeight);
}
for (let i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
if (!this.classList.contains('active')) { // при закрытии какой-либо кнопки закрывается также все внутренние кнопки и контент
for (let x = i + 1; x < coll.length; x++) {
coll[x].classList.remove("active");
coll[x].nextElementSibling.style.maxHeight = null;
}
}
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
for (let prevContent = 0; prevContent < i; prevContent++) { // при открытии какой-либо кнопки нам необходимо также менять высоту всех предыдущих .content для корректного отображения аккордеона, высчитываем новую высоту путем сложения предыдущих значений высоты
let sumHeight = 0;
for (let prevContent = 0; prevContent <= i; prevContent++) {
sumHeight = sumHeight + heightArray[prevContent];
}
coll[prevContent].nextElementSibling.style.maxHeight = sumHeight + 'px';
}
}
});
}
</script>
</body>
</html>