{"id":106407,"date":"2025-06-23T11:15:06","date_gmt":"2025-06-23T11:15:06","guid":{"rendered":"https:\/\/x-phy.com\/?page_id=106407"},"modified":"2025-07-11T10:41:46","modified_gmt":"2025-07-11T10:41:46","slug":"x-phy-faqs","status":"publish","type":"page","link":"https:\/\/x-phy.com\/x-phy-faqs\/","title":{"rendered":"X-PHY FAQs"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"106407\" class=\"elementor elementor-106407\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4f6a7dd e-flex e-con-boxed e-con e-parent\" data-id=\"4f6a7dd\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-5003a72 e-con-full e-flex e-con e-child\" data-id=\"5003a72\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1839020 elementor-widget elementor-widget-shortcode\" data-id=\"1839020\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <div class=\"container-fluid px-0\">\n  <div class=\"row gx-0\">\n    <div class=\"col-md-3 col-12\" id=\"faq-sidebar\"><\/div>\n    <div class=\"col-md-9 col-12\" id=\"faq-content\"><\/div>\n  <\/div>\n<\/div>\n\n    <script>\n    document.addEventListener(\"DOMContentLoaded\", function () {\n        const sheetURL = \"https:\/\/docs.google.com\/spreadsheets\/d\/1glXlkB_9sn-tY9De7Df8KJ2wM8VY-CcSl9W14tlq2Lo\/gviz\/tq?tqx=out:json\";\n\n        fetch(sheetURL)\n            .then(res => res.text())\n            .then(data => {\n                const json = JSON.parse(data.substr(47).slice(0, -2));\n                let rows = [];\n                let current = null;\n\n                \/\/ Handle multi-line answers\n                json.table.rows.slice(1).forEach(row => {\n                    const question = row.c[0]?.v || \"\";\n                    const answer = row.c[1]?.v || \"\";\n                    const category = row.c[2]?.v || \"\";\n                    const tags = row.c[3]?.v || \"\";\n\n                    if (question) {\n                        current = {\n                            question: question,\n                            answer: answer,\n                            category: category,\n                            tags: tags.split(',').map(t => t.trim().toLowerCase())\n                        };\n                        rows.push(current);\n                    } else if (current) {\n                        current.answer += \"<br>\" + answer;\n                    }\n                });\n\n                buildFAQs(rows);\n            });\n\n        function buildFAQs(data) {\n            const sidebar = document.getElementById(\"faq-sidebar\");\n            const content = document.getElementById(\"faq-content\");\n            const categories = [...new Set(data.map(item => item.category))];\n\n            \/\/ Sidebar\n            categories.forEach(category => {\n                const catTags = new Set();\n                const catItems = data.filter(item => item.category === category);\n                catItems.forEach(item => item.tags.forEach(tag => catTags.add(tag)));\n\n                const tagHTML = [...catTags].map(tag =>\n                    `<li><div class=\"tag faq-tag\" data-tag=\"${tag}\">${tag}<\/div><\/li>`).join(\"\");\n\n                sidebar.innerHTML += `\n                    <div class=\"faq-category-sidebar\">\n                        <h6>${category}<\/h6>\n                        <ul class=\"tag-list\">\n                            ${tagHTML} \n                        <\/ul>\n                    <\/div>`;\n            });\n\n            \/\/ Accordion content\n            categories.forEach((category, catIndex) => {\n                const items = data.filter(item => item.category === category);\n                let accordions = items.map((item, idx) => {\n    const safeCat = category.replace(\/\\s+\/g, '-').toLowerCase();\n    const faqId = `faq-${safeCat}-${idx}`;\n    const headingId = `heading-${safeCat}-${idx}`;\n    const collapseId = `${faqId}-collapse`;\n    const parentId = `accordion-${safeCat}`;\n\n    return `\n      <div class=\"accordion-item\" id=\"${faqId}\">\n        <h2 class=\"accordion-header\" id=\"${headingId}\">\n          <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#${collapseId}\" aria-expanded=\"false\" aria-controls=\"${collapseId}\">\n            ${item.question}\n          <\/button>\n        <\/h2>\n        <div id=\"${collapseId}\" class=\"accordion-collapse collapse\" aria-labelledby=\"${headingId}\" data-bs-parent=\"#${parentId}\">\n          <div class=\"accordion-body\" data-tags=\"${item.tags.join(',')}\">\n            ${item.answer}\n          <\/div>\n        <\/div>\n      <\/div>\n    `;\n}).join(\"\");\n\n\n        content.innerHTML += `\n  <div class=\"accordion mb-4\" id=\"accordion-${category.replace(\/\\s+\/g, '-')}\">\n    <h3 class=\"mb-3\">${category}<\/h3>\n    ${accordions}\n  <\/div>`;\n            });\n\n            \/\/ Tag click logic\n            document.querySelectorAll(\".faq-tag\").forEach(tagEl => {\n  tagEl.addEventListener(\"click\", () => {\n    const clickedTag = tagEl.dataset.tag.trim().toLowerCase();\n\n    \/\/ Collapse all currently open panels\n    document.querySelectorAll(\".accordion-collapse.show\").forEach(el => {\n      bootstrap.Collapse.getOrCreateInstance(el).hide();\n    });\n\n    \/\/ Find all matching answers\n    const matches = Array.from(document.querySelectorAll(\".accordion-body\")).filter(body => {\n      const tags = (body.dataset.tags || \"\").split(\",\").map(t => t.trim());\n      return tags.includes(clickedTag);\n    });\n\n    \/\/ Expand all matching\n    matches.forEach(body => {\n      const collapseDiv = body.closest(\".accordion-collapse\");\n      if (collapseDiv) {\n        bootstrap.Collapse.getOrCreateInstance(collapseDiv).show();\n\n        \/\/ Optional: scroll into view\n        collapseDiv.scrollIntoView({ behavior: \"smooth\", block: \"center\" });\n      }\n    });\n  });\n});\n\n        }\n    });\n    <\/script>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-967b85b elementor-widget elementor-widget-html\" data-id=\"967b85b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n        .sidebar {\n      max-width: 250px;\n      padding: 1rem;\n      background: #f8f9fa;\n      border-right: 1px solid #ddd;\n      height: 100vh;\n      overflow-y: auto;\n    }\n    ul.tag-list {\n    \/* margin-left: 0px; *\/\n    padding-left: 19px;\n}\n.faq-category-sidebar h6 {\n    font-weight: bold;\n}\nh3.mb-3 {\n    font-weight: bold;\n}\n.faq-category-sidebar {\n    padding-bottom: 12px !important;\n}\nbutton.accordion-button:hover, \nbutton.accordion-button:focus, \nbutton.accordion-button:active,\n.accordion-button:not(.collapsed){\nbackground-color: #f7f7f7 !important;\n    color: black;\n    box-shadow: none !important;\n    outline: none;\n}\n    .tag {\n      display: inline-block;\n      cursor: pointer;\n    }\n    .accordion-button:focus {\n      box-shadow: none;\n    }\n    #faq-sidebar, #faq-content {\n    overflow-x: hidden;\n    \n  }\n\n  .accordion-body {\n    word-wrap: break-word;\n    overflow-x: auto;\n  }\n  @media (max-width: 767.98px) {\n  #faq-sidebar {\n    display: none;\n  }\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"content-type":"","inline_featured_image":false,"footnotes":""},"class_list":["post-106407","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/x-phy.com\/wp-json\/wp\/v2\/pages\/106407","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/x-phy.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/x-phy.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/x-phy.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/x-phy.com\/wp-json\/wp\/v2\/comments?post=106407"}],"version-history":[{"count":0,"href":"https:\/\/x-phy.com\/wp-json\/wp\/v2\/pages\/106407\/revisions"}],"wp:attachment":[{"href":"https:\/\/x-phy.com\/wp-json\/wp\/v2\/media?parent=106407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}