Table of Content does not show (load) if hidden with CSS on load

Bugs
1

Browser: Chrome Version 136.0.7103.93 (Official Build) (64-bit)
OS: Windows 11
Bricks Builder: 1.12.4 and 2.0 alpha

Related Issue:

To clarify this bug I opened this Issue.

The Table of Contents (ToC) will not be displayed (Load) if it is hidden when loading the page with:

display: none;
height: 0;

That is the reason why we will not see ToC displayed (Load) when it is placed in Nested like Tab (Nestable), Accordion (Nestable). If Tab / Accordion is hidden by default, ToC will not be seen.

To clarify this I tried to create a “Collapsible Bar” using js + css, containing the Bricks Builder ToC inside.

CSS:

.toc-content {
  display: none;
  height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  flex-direction: column;
}

.toc-container.active .toc-content {
  display: flex;
  height: auto;
}

.toc-header__icon {
  transition: transform 0.3s ease;
}

.toc-container.active .toc-header__icon {
  transform: rotate(180deg);
}

JavaScript:

document.querySelectorAll('.toc-header').forEach(header => {
  header.addEventListener('click', function() {
    const container = this.closest('.toc-container');
    container.classList.toggle('active');
  });
});

image

If “ToC__Container” has class “.active” initially then ToC will be displayed and “Collapsible Bar” will work normally. Otherwise if “ToC__Container” does not have class “.active” initially then ToC will not be displayed (loaded).

Thanks
:bear: