Как создать аккордеон внутри табов карточки товара в Tilda

<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {
        const nameTab = 'FAQ';//Название вкладки
        const isAccordionMode = true;//Открывать по одной true, открывать сразу несколько false
        
        function getAllTabSelectors() {
            const selectors = [];
            
            if (document.querySelector('.t-store__tabs')) {
                selectors.push({
                    type: 'store',
                    tabsContainer: '.t-store__tabs',
                    tabItem: '.t-store__tabs__item',
                    preface: '.t-redactor__preface',
                    quote: '.t-redactor__quote',
                    content: '.t-store__tabs__content'
                });
            }
            
            if (document.querySelector('.t-catalog__tabs')) {
                selectors.push({
                    type: 'catalog',
                    tabsContainer: '.t-catalog__tabs',
                    tabItem: '.t-catalog__tabs__item',
                    preface: '.t-redactor__preface',
                    quote: '.t-redactor__quote',
                    content: '.t-catalog__tabs__content'
                });
            }
            
            return selectors;
        }
        
        function makeAllTabsVisible() {
            const allSelectors = getAllTabSelectors();
            if (allSelectors.length === 0) return;
            
            allSelectors.forEach(selector => {
                const allTabs = document.querySelectorAll(selector.tabsContainer);
                allTabs.forEach(tab => {
                    if (!tab.classList.contains('show-tabs')) {
                        tab.classList.add('show-tabs');
                    }
                    tab.style.opacity = '1';
                });
            });
        }
        
        function createFaqAccord(targetContainer = null){
            setTimeout(function(){
                const allSelectors = getAllTabSelectors();
                if (allSelectors.length === 0) return;
                
                makeAllTabsVisible();
                
                allSelectors.forEach(selector => {
                    let containersToProcess = [];
                    if (targetContainer) {
                        if (targetContainer.matches && targetContainer.matches(selector.tabsContainer)) {
                            containersToProcess = [targetContainer];
                        } else {
                            return;
                        }
                    } else {
                        containersToProcess = Array.from(document.querySelectorAll(selector.tabsContainer));
                    }
                    
                    for(let i = 0; i < containersToProcess.length; i++){
                        const productTabsContainer = containersToProcess[i];
                        
                        if (!productTabsContainer.classList.contains('show-tabs')) {
                            productTabsContainer.classList.add('show-tabs');
                            productTabsContainer.style.opacity = '1';
                        }
                        
                        const faqTab = productTabsContainer.querySelector(`${selector.tabItem}[data-tab-title="${nameTab}"]`);
                        if(faqTab){
                            const faqContent = faqTab.querySelector(selector.content);
                            if(faqContent && !faqContent.hasAttribute('data-accordion-initialized')) {
                                faqContent.setAttribute('data-accordion-initialized', 'true');
                                
                                const getRelatedQuotes = (prefaceElement) => {
                                    const quotes = [];
                                    let next = prefaceElement.nextElementSibling;
                                    
                                    while (next && !next.classList.contains(selector.preface.replace('.', ''))) {
                                        if (next.classList.contains(selector.quote.replace('.', ''))) {
                                            quotes.push(next);
                                        }
                                        next = next.nextElementSibling;
                                    }
                                    
                                    return quotes;
                                };
                                
                                faqContent.querySelectorAll(selector.preface).forEach((preface) => {
                                    const relatedQuotes = getRelatedQuotes(preface);
                                    
                                    if (!preface.classList.contains('active')) {
                                        relatedQuotes.forEach(quote => {
                                            quote.style.maxHeight = '0';
                                            quote.classList.remove('show-content');
                                        });
                                    } else {
                                        relatedQuotes.forEach(quote => {
                                            quote.classList.add('show-content');
                                        });
                                    }
                                    
                                    const newPreface = preface.cloneNode(true);
                                    if (preface.parentNode) {
                                        preface.parentNode.replaceChild(newPreface, preface);
                                    }
                                    
                                    newPreface.addEventListener('click', () => {
                                        const isOpening = !newPreface.classList.contains('active');
                                        const currentRelatedQuotes = getRelatedQuotes(newPreface);
                                        
                                        if (isAccordionMode && isOpening) {
                                            faqContent.querySelectorAll(`${selector.preface}.active`).forEach(otherPreface => {
                                                if (otherPreface !== newPreface) {
                                                    otherPreface.classList.remove('active');
                                                    getRelatedQuotes(otherPreface).forEach(q => {
                                                        q.style.maxHeight = '0';
                                                        q.classList.remove('show-content');
                                                    });
                                                }
                                            });
                                        }
                                        
                                        newPreface.classList.toggle('active');
                                        
                                        currentRelatedQuotes.forEach(quote => {
                                            if (newPreface.classList.contains('active')) {
                                                quote.style.maxHeight = quote.scrollHeight + 'px';
                                                quote.classList.add('show-content');
                                            } else {
                                                quote.style.maxHeight = '0';
                                                quote.classList.remove('show-content');
                                            }
                                        });
                                    });
                                });
                                
                                faqContent.querySelectorAll(selector.quote).forEach(quote => {
                                    const prev = quote.previousElementSibling;
                                    if (!prev || !prev.classList.contains(selector.preface.replace('.', ''))) {
                                        quote.style.maxHeight = '0';
                                        quote.classList.remove('show-content');
                                    }
                                });
                            }
                        }
                    }
                });
                
                setTimeout(() => {
                    const allSelectorsFinal = getAllTabSelectors();
                    allSelectorsFinal.forEach(selector => {
                        const finalCheck = document.querySelectorAll(selector.tabsContainer);
                        finalCheck.forEach(tab => {
                            const opacity = window.getComputedStyle(tab).opacity;
                            const hasClass = tab.classList.contains('show-tabs');
                            if (opacity === '0' || !hasClass) {
                                tab.classList.add('show-tabs');
                                tab.style.opacity = '1';
                            }
                        });
                    });
                }, 100);
                
            }, 300); 
        };
        
        setInterval(() => {
            const allSelectors = getAllTabSelectors();
            allSelectors.forEach(selector => {
                const allTabs = document.querySelectorAll(selector.tabsContainer);
                allTabs.forEach(tab => {
                    const opacity = window.getComputedStyle(tab).opacity;
                    if (opacity === '0' && !tab.classList.contains('show-tabs')) {
                        tab.classList.add('show-tabs');
                        tab.style.opacity = '1';
                    }
                });
            });
        }, 2000);
        
        setTimeout(() => {
            makeAllTabsVisible();
            createFaqAccord();
        }, 100);
        
        const observer = new MutationObserver(function(mutations) {
            let hasNewTabs = false;
            mutations.forEach(function(mutation) {
                mutation.addedNodes.forEach(function(node) {
                    if (node.nodeType === 1) {
                        const allSelectors = getAllTabSelectors();
                        allSelectors.forEach(selector => {
                            if(node.matches && node.matches(selector.tabsContainer)) {
                                node.classList.add('show-tabs');
                                node.style.opacity = '1';
                                createFaqAccord(node);
                                hasNewTabs = true;
                            }
                            const newTabs = node.querySelectorAll ? node.querySelectorAll(selector.tabsContainer) : [];
                            if(newTabs.length) {
                                newTabs.forEach(tab => {
                                    tab.classList.add('show-tabs');
                                    tab.style.opacity = '1';
                                    createFaqAccord(tab);
                                });
                                hasNewTabs = true;
                            }
                        });
                    }
                });
            });
            if (hasNewTabs) {
                setTimeout(() => makeAllTabsVisible(), 200);
            }
        });
        
        observer.observe(document.body, { childList: true, subtree: true });
        
        document.addEventListener('click', function(event) { 
            const link = event.target.closest('a[href*="/tproduct/"], a[href*="/part-total/tproduct/"], a[href*="tproduct"]');
            if(link) {
                for (let delay of [100, 300, 600, 1000, 1500, 2000]) {
                    setTimeout(() => {
                        makeAllTabsVisible();
                        createFaqAccord();
                    }, delay);
                }
            }
        });
        
    })();    
});    
</script>

<style>
.t-store__tabs,
.t-catalog__tabs {
    opacity: 0;
    transition: all 0.3s;
}

.t-store__tabs.show-tabs,
.t-catalog__tabs.show-tabs {
    opacity: 1 !important;
}

.t-store__tabs.t-store__tabs_tabs,
.t-catalog__tabs.t-catalog__tabs_tabs {
    height: auto !important;
}

.t-store blockquote.t-redactor__preface:first-child,
.t-catalog blockquote.t-redactor__preface:first-child {
    border-top: none;
}

.t-store .t-store__tabs__content,
.t-catalog .t-catalog__tabs__content {
    max-width: none;
    border-bottom: 1px solid #eee;
}

.t-store blockquote.t-redactor__preface,
.t-catalog blockquote.t-redactor__preface {
    border-top: 1px solid #eee;
    padding: 14px 0;
    font-size: 16px;
    padding-right: 25px;
    font-weight: 500;
    transition: all 0.3s;
}

.t-store blockquote.t-redactor__quote,
.t-catalog blockquote.t-redactor__quote {
    font-style: normal;
    border: none;
    padding-left: 14px;
    padding-right: 20px;
}

.t-store blockquote.t-redactor__preface:hover,
.t-catalog blockquote.t-redactor__preface:hover {
    background-color: #f9f9f9;
}

.t-redactor__quote {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    margin: 0;
    padding: 0;
}

.t-redactor__preface {
    cursor: pointer;
    position: relative;
    padding-right: 25px;
}

.t-redactor__preface::after {
    content: "+";
    font-weight: 300;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: all 0.3s ease;
    transform-origin: center center;
    font-size: 2em;
    width: 16px;
    text-align: center;
}

.t-redactor__preface.active::after {
    transform: translateY(-50%) rotate(45deg);
}

.t-redactor__quote.show-content {
    padding-bottom: 7px;
}
</style>