Как создать аккордеон внутри Zero Block в Тильда

<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {
        //Настройка режима работы: 'single' или 'multiple'
        const accordionMode = 'multiple'; // Измените на 'multiple' если нужно несколько вкладок
        const scrollOffset = 20; // Смещение при скролле в пикселях (можно настроить)
        const openFirstTab = false; // true - открывать первую вкладку при загрузке, false - все закрыты
        
        // Находим все триггеры
        const triggers = document.querySelectorAll('.accord-trigger');
        
        // Функция закрытия секции
        function closeSection(section) {
          const content = section.querySelector('.accord-content');
          const icon = section.querySelector('.accord-icon');
          section.classList.remove('accord-open');
          // Плавное сворачивание
          if (content) {
            content.style.height = `${content.scrollHeight}px`;
            content.offsetHeight;
            content.style.height = '0';
          }
          
          // Поворот иконки
          if (icon) {
            icon.style.transform = 'rotate(0deg)';
          }
        }
        
        // Функция открытия секции
        function openSection(section) {
          const content = section.querySelector('.accord-content');
          const icon = section.querySelector('.accord-icon');
          section.classList.add('accord-open');
          // Плавное раскрытие
          if (content) {
            content.style.height = '0';
            content.offsetHeight;
            content.style.height = `${content.scrollHeight}px`;
          }
          
          // Поворот иконки
          if (icon) {
            icon.style.transform = 'rotate(90deg)';
          }
        }
        
        // Функция закрытия всех секций кроме указанной
        function closeAllExcept(currentSection) {
          const sections = document.querySelectorAll('.accord-section');
          sections.forEach(section => {
            if (section !== currentSection && section.classList.contains('accord-open')) {
              closeSection(section);
            }
          });
        }
        
        // Функция для плавного скролла к элементу
        function smoothScrollToElement(element, offset = 0) {
          if (!element) return;
          
          const elementPosition = element.getBoundingClientRect().top + window.pageYOffset;
          const offsetPosition = elementPosition - offset;
          
          window.scrollTo({
            top: offsetPosition,
            behavior: 'smooth'
          });
        }
        
        function updateArtboardHeight(trigger) {
          const artboard = trigger.closest('.t396__artboard');
          
          if (artboard && artboard.getAttribute('data-artboard-heightmode') === 'hug') {
            if (typeof t396__updateAutoHeight === 'function') {
              t396__updateAutoHeight(artboard);
            } else {
              console.warn('Функция t396__updateAutoHeight не найдена');
            }
          }
        }
        
        // Функция для инициализации первой вкладки
        function initFirstTab() {
          if (!openFirstTab) return;
          
          const firstSection = document.querySelector('.accord-section');
          if (!firstSection) return;
          
          const firstTrigger = firstSection.querySelector('.accord-trigger');
          const firstContent = firstSection.querySelector('.accord-content');
          const firstIcon = firstSection.querySelector('.accord-icon');
          
          // Принудительно устанавливаем начальное состояние
          firstSection.classList.add('accord-open');
          
          // Устанавливаем высоту контента
          if (firstContent) {
            setTimeout(() => {
              firstContent.style.height = `${firstContent.scrollHeight}px`;
            }, 0);
          }
          
          // Поворачиваем иконку
          if (firstIcon) {
            firstIcon.style.transform = 'rotate(90deg)';
          }
          
          if (firstTrigger) {
            updateArtboardHeight(firstTrigger);
            setTimeout(() => {
              updateArtboardHeight(firstTrigger);
            }, 100);
            setTimeout(() => {
              updateArtboardHeight(firstTrigger);
            }, 300);
          }
          window.addEventListener('load', function() {
            if (firstTrigger) {
              setTimeout(() => {
                updateArtboardHeight(firstTrigger);
              }, 100);
            }
          });
        }

        document.querySelectorAll('.accord-content').forEach((content, index) => {
          const section = content.closest('.accord-section');
          // Если это не первая секция или openFirstTab = false, скрываем
          if (index !== 0 || !openFirstTab) {
            content.style.height = '0';
          }
        });
        
        // Инициализируем первую вкладку
        initFirstTab();
        
        triggers.forEach(trigger => {
          trigger.addEventListener('click', function(e) {
            const section = this.closest('.accord-section');
            if (!section) return;
            
            const isOpen = section.classList.contains('accord-open');
            const wasAnyOpen = document.querySelector('.accord-section.accord-open') !== null;
            
            // Если режим "одна вкладка", закрываем все другие
            if (accordionMode === 'single') {
              closeAllExcept(section);
            }
            
            // Открываем или закрываем текущую секцию
            if (isOpen) {
              closeSection(section);
              
              // Ждем завершения анимации закрытия
              setTimeout(() => {
                updateArtboardHeight(this);
              }, 300);
              
            } else {
              openSection(section);
              
              // Если в режиме single и была открыта другая вкладка, 
              // ждем завершения всех анимаций и делаем скролл
              if (accordionMode === 'single' && wasAnyOpen) {
                // Ждем завершения анимаций закрытия и открытия
                setTimeout(() => {
                  // Обновляем высоту артборда
                  updateArtboardHeight(this);
                  
                  // Плавный скролл к кликнутому элементу с отступом
                  smoothScrollToElement(section, scrollOffset);
                }, 300);
              } else {
                // Если не было открытых вкладок, просто обновляем высоту
                setTimeout(() => {
                  updateArtboardHeight(this);
                }, 300);
              }
            }
          });
        });
        
        // Очищаем высоту после завершения анимации
        document.querySelectorAll('.accord-content').forEach(content => {
          content.addEventListener('transitionend', function() {
            if (this.closest('.accord-section').classList.contains('accord-open')) {
              this.style.height = '';
            } else {
              this.style.height = '0';
            }

            const trigger = this.closest('.accord-section')?.querySelector('.accord-trigger');
            if (trigger) {
              updateArtboardHeight(trigger);
            }
          });
        });
    })();    
});    
</script>


<style>
.accord-icon {
  transition: transform 0.3s ease;
}
.accord-content {
  overflow: hidden;
  transition: height 0.3s ease;
  height: 0;
}
.accord-trigger {
  cursor: pointer;
}
</style>

<style>
@media screen and (min-width:960px){
#allrecords .sticky-block {
    position: sticky !important;
    top: 10px !important;
}
#allrecords .t396__artboard:has(.sticky-block) {
    overflow: visible;
}
}
</style>