{"version":"1.0.3","templatekey":"accordian","name":"Accordian","instructions":"This is an accordian component. You need to nest accordian items inside the accordian tags on the page. The contents of the accordian items are what users will see. ","content":"<div id=\"{{AUTOID}}\" style=\"visibility:hidden\">\n<div class=\"filter_generico_accordian_container p-2\">","templateend":"</div>\n</div>","variabledefaults":"","jscontent":"require([], function() {\n    const container = document.getElementById('{{AUTOID}}');\n    const accordionContainer = container.querySelector('.filter_generico_accordian_container');\n\n    accordionContainer.querySelectorAll('.filter_generico_accordionitem').forEach((e) => {\n        const parent = e.parentNode;\n        if (parent && parent.tagName.toLowerCase() === 'span') {\n            parent.replaceWith(...parent.childNodes);\n        }\n    });\n\n    Array.from(accordionContainer.children).forEach(child => {\n        if (!child.classList.contains('filter_generico_accordionitem')) {\n            child.remove();\n        }\n    });\n\n    const accordion = document.createElement('div');\n    accordion.classList.add('accordion');\n    accordion.id = '{{AUTOID}}_accordion';\n\n    Array.from(accordionContainer.querySelectorAll('.filter_generico_accordionitem')).forEach((item, index) => {\n        const titleEl = item.querySelector('#title_' + item.id);\n        const titleText = titleEl ? titleEl.textContent.trim() : '';\n        if (titleEl) titleEl.remove();\n\n        const isFirst = index === 0;\n        const collapseId = item.id + '_collapse';\n\n        const accordionItem = document.createElement('div');\n        accordionItem.classList.add('accordion-item');\n\n        const header = document.createElement('h2');\n        header.classList.add('accordion-header');\n\n        const btn = document.createElement('button');\n        btn.classList.add('accordion-button');\n        if (!isFirst) btn.classList.add('collapsed');\n        btn.type = 'button';\n        btn.setAttribute('data-bs-toggle', 'collapse');\n        btn.setAttribute('data-bs-target', '#' + collapseId);\n        btn.setAttribute('aria-expanded', isFirst ? 'true' : 'false');\n        btn.setAttribute('aria-controls', collapseId);\n        btn.textContent = titleText;\n        header.appendChild(btn);\n\n        const collapseDiv = document.createElement('div');\n        collapseDiv.id = collapseId;\n        collapseDiv.classList.add('accordion-collapse', 'collapse');\n        if (isFirst) collapseDiv.classList.add('show');\n        collapseDiv.setAttribute('data-bs-parent', '#{{AUTOID}}_accordion');\n\n        const body = document.createElement('div');\n        body.classList.add('accordion-body');\n        while (item.firstChild) {\n            body.appendChild(item.firstChild);\n        }\n\n        collapseDiv.appendChild(body);\n        accordionItem.appendChild(header);\n        accordionItem.appendChild(collapseDiv);\n        accordion.appendChild(accordionItem);\n    });\n\n    accordionContainer.appendChild(accordion);\n    container.style.visibility = 'visible';\n});\n","importcss":"//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css","customcss":"","dataset":"","datasetvars":"","allowedcontexts":"","allowedcontextids":""}