Как свернуть строки несколько раз в html css js ⇐ CSS

[Anonymous]

ДЕЙСТВИЕ: зафиксировать заголовок, зафиксировать первый столбец и несколько раз свернуть строку.
УЖЕ ДОСТИЖЕНО: закрепить заголовок, закрепить первый столбец и свернуть только один раз.
МОЙ КОД:

Код: Выделить всё

Header 1
Header 2




[i][/i] Row 1, Column 1
Row 1, Column 2






[i][/i] Row 1.1, Column 1
Row 1.1, Column 2




Row 1.1.1, Column 1
Row 1.1.1, Column 2


[i][/i] Row 2, Column 1
Row 2, Column 2
Row 2, Column 3




// JavaScript to handle collapse functionality
document.querySelectorAll('.parent-row').forEach(function(row) {
row.addEventListener('click', function() {
var nextRow = row.nextElementSibling;
if (nextRow && nextRow.classList.contains('collapse')) {
nextRow.classList.toggle('show');
row.querySelector('.collapse-icon').classList.toggle('fa-caret-right');
row.querySelector('.collapse-icon').classList.toggle('fa-caret-down');
}
});
});

Как добиться того же, что показано на изображении ниже? спасибо.
Достижимый макет

Подробнее здесь: https://stackoverflow.com/questions/784 ... tml-css-js