acc json

{"component":{"name":"ct_div_block","id":104,"options":{"nicename":"Accordion Basic","selector":"div_block-104-210","ct_id":104,"ct_parent":0},"children":[{"id":105,"name":"ct_div_block","options":{"ct_id":105,"ct_parent":104,"selector":"div_block-105-210","original":{"custom-attributes":[{"name":"data-accordion-multi-collapsable","value":"false","pinned":true},{"name":"data-accordion-transition-duration","value":"0.3s","pinned":true},{"name":"data-accordion-center","value":"false","pinned":true},{"name":"data-accordion-anchor","value":"20px"}],"gap":"15"},"nicename":"Accordions","classes":["x-accordions"],"nth-child(2) .ct-div-block":[],"nth-child(n) .x-accordion:nth-child(2) .ct-div-block":[],"nth-child(n) .x-accordion .ct-div-block:nth-child(2)":[]},"depth":2,"children":[{"id":106,"name":"ct_div_block","options":{"ct_id":106,"ct_parent":105,"selector":"div_block-106-210","original":{"custom-attributes":[{"name":"data-accordion","value":"open","pinned":true}]},"nicename":"Accordion","classes":["x-accordion"],"has(.x-accordion-active) .x-accordion-head":[]," fsd s":[]," .x-accordion-head":[]},"depth":3,"children":[{"id":107,"name":"ct_div_block","options":{"ct_id":107,"ct_parent":106,"selector":"div_block-107-210","original":[],"nicename":"Head","classes":["x-acc-simple-head","x-acc-simple-head-active"],"active":[],"focus":[]},"depth":4,"children":[{"id":108,"name":"ct_text_block","options":{"ct_id":108,"ct_parent":107,"selector":"text_block-108-210","original":[],"nicename":"Text (#64)","ct_content":"Exceptional performance with Oxygen<br>"},"depth":5},{"id":109,"name":"ct_fancy_icon","options":{"ct_id":109,"ct_parent":107,"selector":"fancy_icon-109-210","original":{"icon-id":"FontAwesomeicon-angle-down"},"nicename":"Icon (#174)","classes":["x-acc-simple-icon","x-acc-simple-icon-active"]},"depth":5}]},{"id":110,"name":"ct_div_block","options":{"ct_id":110,"ct_parent":106,"selector":"div_block-110-210","original":[],"nicename":"Content","classes":["x-acc-simple-content","x-acc-simple-content-active"]},"depth":4,"children":[{"id":111,"name":"ct_div_block","options":{"ct_id":111,"ct_parent":110,"selector":"div_block-111-210","original":{"padding-top":"20","padding-right":"20","padding-bottom":"20","padding-left":"20"},"nicename":"Div (#65)"},"depth":5,"children":[{"id":112,"name":"oxy_rich_text","options":{"ct_id":112,"ct_parent":111,"selector":"_rich_text-112-210","original":[],"nicename":"Rich Text (#28)","ct_content":"<p>Oxygen Builder stands out for its ability to generate clean and lightweight code, ensuring websites load quickly and operate efficiently. This not only enhances the user experience but also increases the chances of achieving better search engine rankings. Its focus on performance makes it ideal for projects that require speed and stability.</p><ul><li>Generates optimized and lightweight code.</li><li>Improves scores in tools like Google PageSpeed Insights.</li><li>Reduces loading times, even for complex projects.</li></ul>"},"depth":6}]}]}]},{"id":113,"name":"ct_div_block","options":{"ct_id":113,"ct_parent":105,"selector":"div_block-113-210","original":{"custom-attributes":[{"name":"data-accordion","value":"","pinned":true}]},"nicename":"Accordion","classes":["x-accordion"],"has(.x-accordion-active) .x-accordion-head":[]," fsd s":[]," .x-accordion-head":[]},"depth":3,"children":[{"id":114,"name":"ct_div_block","options":{"ct_id":114,"ct_parent":113,"selector":"div_block-114-210","original":[],"nicename":"Head","classes":["x-acc-simple-head","x-acc-simple-head-active"],"active":[],"focus":[]},"depth":4,"children":[{"id":115,"name":"ct_text_block","options":{"ct_id":115,"ct_parent":114,"selector":"text_block-115-210","original":[],"nicename":"Text (#64)","ct_content":"Complete design control with Oxygen<br>"},"depth":5},{"id":116,"name":"ct_fancy_icon","options":{"ct_id":116,"ct_parent":114,"selector":"fancy_icon-116-210","original":{"icon-id":"FontAwesomeicon-angle-down"},"nicename":"Icon (#174)","classes":["x-acc-simple-icon","x-acc-simple-icon-active"]},"depth":5}]},{"id":117,"name":"ct_div_block","options":{"ct_id":117,"ct_parent":113,"selector":"div_block-117-210","original":[],"nicename":"Content","classes":["x-acc-simple-content","x-acc-simple-content-active"]},"depth":4,"children":[{"id":118,"name":"ct_div_block","options":{"ct_id":118,"ct_parent":117,"selector":"div_block-118-210","original":{"padding-top":"20","padding-right":"20","padding-bottom":"20","padding-left":"20"},"nicename":"Div (#65)"},"depth":5,"children":[{"id":119,"name":"oxy_rich_text","options":{"ct_id":119,"ct_parent":118,"selector":"_rich_text-119-210","original":[],"nicename":"Rich Text (#173)","ct_content":"<p>Oxygen offers unparalleled flexibility, allowing designers and developers to customize every detail of a website’s design. Whether you need a minimalist layout or a visually complex project, Oxygen provides the tools to make it happen without compromising functionality.</p><ul><li>Granular control over every aspect of design.</li><li>Advanced support for customization with CSS, JS, and PHP.</li><li>Unique capabilities to create professional, one-of-a-kind websites.</li></ul>"},"depth":6}]}]}]},{"id":120,"name":"ct_div_block","options":{"ct_id":120,"ct_parent":105,"selector":"div_block-120-210","original":{"custom-attributes":[{"name":"data-accordion","value":"","pinned":true}]},"nicename":"Accordion","classes":["x-accordion"],"has(.x-accordion-active) .x-accordion-head":[]," fsd s":[]," .x-accordion-head":[]},"depth":3,"children":[{"id":121,"name":"ct_div_block","options":{"ct_id":121,"ct_parent":120,"selector":"div_block-121-210","original":[],"nicename":"Head","classes":["x-acc-simple-head","x-acc-simple-head-active"],"active":[],"focus":[]},"depth":4,"children":[{"id":122,"name":"ct_text_block","options":{"ct_id":122,"ct_parent":121,"selector":"text_block-122-210","original":[],"nicename":"Text (#64)","ct_content":"Oxygen’s compatibility with WooCommerce<br>"},"depth":5},{"id":123,"name":"ct_fancy_icon","options":{"ct_id":123,"ct_parent":121,"selector":"fancy_icon-123-210","original":{"icon-id":"FontAwesomeicon-angle-down"},"nicename":"Icon (#174)","classes":["x-acc-simple-icon","x-acc-simple-icon-active"]},"depth":5}]},{"id":124,"name":"ct_div_block","options":{"ct_id":124,"ct_parent":120,"selector":"div_block-124-210","original":[],"nicename":"Content","classes":["x-acc-simple-content","x-acc-simple-content-active"],"activeselector":false},"depth":4,"children":[{"id":125,"name":"ct_div_block","options":{"ct_id":125,"ct_parent":124,"selector":"div_block-125-210","original":{"padding-top":"20","padding-right":"20","padding-bottom":"20","padding-left":"20"},"nicename":"Div (#65)"},"depth":5,"children":[{"id":126,"name":"oxy_rich_text","options":{"ct_id":126,"ct_parent":125,"selector":"_rich_text-126-210","original":[],"nicename":"Rich Text (#173)","ct_content":"<p>If you’re looking to build an online store, Oxygen is an excellent choice. Its integration with WooCommerce allows for custom designs of product pages, carts, and checkouts. It also simplifies online store management with advanced design and optimization tools that ensure both functionality and aesthetics.</p><ul><li>Custom design for product pages and carts.</li><li>Seamless integration with all WooCommerce features.</li><li>Optimization for conversions and user experience.</li></ul>"},"depth":6}]}]}]}]},{"id":127,"name":"oxy_dynamic_list","options":{"ct_id":127,"ct_parent":104,"selector":"_dynamic_list-127-210","original":{"wp_query":"custom","query_post_types":["post"],"query_count":"-1","custom-attributes":[{"name":"data-accordion-multi-collapsable","value":"false","pinned":true},{"name":"data-accordion-transition-duration","value":"0.3s","pinned":true},{"name":"data-accordion-center","value":"false","pinned":true},{"name":"data-accordion-anchor","value":"20px"}],"gap":"10","flex-direction":"column","display":"flex"},"nicename":"Repeater (Accordions)","classes":["x-accordions"],"activeselector":false},"depth":2,"children":[{"id":128,"name":"ct_div_block","options":{"ct_id":128,"ct_parent":127,"selector":"div_block-128-210","original":{"custom-attributes":[{"name":"data-accordion","pinned":true}]},"nicename":"Div (Accordion)","classes":["x-accordion"]},"depth":3,"children":[{"id":129,"name":"ct_div_block","options":{"ct_id":129,"ct_parent":128,"selector":"div_block-129-210","original":[],"nicename":"Head","classes":["x-acc-simple-head","x-acc-simple-head-active"],"active":[],"focus":[]},"depth":4,"children":[{"id":130,"name":"ct_text_block","options":{"ct_id":130,"ct_parent":129,"selector":"text_block-130-210","original":[],"nicename":"Text (#64)","ct_content":"Exceptional performance with Oxygen<br>"},"depth":5},{"id":131,"name":"ct_fancy_icon","options":{"ct_id":131,"ct_parent":129,"selector":"fancy_icon-131-210","original":{"icon-id":"FontAwesomeicon-angle-down"},"nicename":"Icon (#174)","classes":["x-acc-simple-icon","x-acc-simple-icon-active"]},"depth":5}]},{"id":132,"name":"ct_div_block","options":{"ct_id":132,"ct_parent":128,"selector":"div_block-132-210","original":[],"nicename":"Content","classes":["x-acc-simple-content","x-acc-simple-content-active"]},"depth":4,"children":[{"id":133,"name":"ct_div_block","options":{"ct_id":133,"ct_parent":132,"selector":"div_block-133-210","original":{"padding-top":"20","padding-right":"20","padding-bottom":"20","padding-left":"20"},"nicename":"Div (#65)"},"depth":5,"children":[{"id":134,"name":"oxy_rich_text","options":{"ct_id":134,"ct_parent":133,"selector":"_rich_text-134-210","original":[],"nicename":"Rich Text (#28)","ct_content":"<p>Oxygen Builder stands out for its ability to generate clean and lightweight code, ensuring websites load quickly and operate efficiently. This not only enhances the user experience but also increases the chances of achieving better search engine rankings. Its focus on performance makes it ideal for projects that require speed and stability.</p><ul><li>Generates optimized and lightweight code.</li><li>Improves scores in tools like Google PageSpeed Insights.</li><li>Reduces loading times, even for complex projects.</li></ul>"},"depth":6}]}]}]}]},{"id":135,"name":"ct_code_block","options":{"ct_id":135,"ct_parent":104,"selector":"code_block-135-210","original":{"code-css":".x-accordion > .ct-div-block:nth-child(1) {\n  cursor: pointer;\n}\n\n\n\n\n\n","code-js":"function setPermanentTransitionDuration(element, duration) {\n  if (!duration) return\n  if (Array.from(element.classList).some(cls => cls.endsWith('-active') || cls === 'x-accordion-active')) {\n    element.style.transitionDuration = duration\n  }\n  element.querySelectorAll('*').forEach(child => {\n    if (Array.from(child.classList).some(cls => cls.endsWith('-active') || cls === 'x-accordion-active')) {\n      child.style.transitionDuration = duration\n    }\n  })\n}\n\nfunction applyActiveClasses(element, duration) {\n  Array.from(element.classList).forEach(cls => {\n    if (!cls.startsWith('ct-') && !cls.endsWith('-active')) {\n      element.classList.add(cls + '-active')\n    }\n  })\n  if (duration) {\n    if (Array.from(element.classList).some(cls => cls.endsWith('-active') || cls === 'x-accordion-active')) {\n      element.style.transitionDuration = duration\n    }\n    element.querySelectorAll('*').forEach(child => {\n      if (Array.from(child.classList).some(cls => cls.endsWith('-active') || cls === 'x-accordion-active')) {\n        child.style.transitionDuration = duration\n      }\n    })\n  }\n}\n\nfunction removeActiveClasses(element) {\n  Array.from(element.classList).forEach(cls => {\n    if (cls.endsWith('-active')) element.classList.remove(cls)\n  })\n  element.querySelectorAll('*').forEach(child => {\n    Array.from(child.classList).forEach(cls => {\n      if (cls.endsWith('-active')) child.classList.remove(cls)\n    })\n  })\n}\n\nfunction initializeAccordions(selector) {\n  const accordions = document.querySelectorAll(selector)\n  accordions.forEach(accordion => {\n    setPermanentTransitionDuration(accordion, '0s')\n  })\n  accordions.forEach(accordion => {\n    const isOpen = accordion.getAttribute('data-accordion') === 'open'\n    const blocks = Array.from(accordion.children).filter(child => child.classList.contains('ct-div-block'))\n    const content = blocks[1]\n    const trigger = blocks[0]\n    if (isOpen) {\n      accordion.classList.add('x-accordion-active')\n      if (content) content.style.maxHeight = 'initial'\n      applyActiveClasses(trigger, '0s')\n      trigger.querySelectorAll('*').forEach(child => applyActiveClasses(child, '0s'))\n      applyActiveClasses(content, '0s')\n      content.querySelectorAll('*').forEach(child => applyActiveClasses(child, '0s'))\n    } else {\n      accordion.classList.remove('x-accordion-active')\n      if (content) content.style.maxHeight = null\n      accordion.querySelectorAll('.ct-div-block').forEach(el => removeActiveClasses(el))\n    }\n  })\n  requestAnimationFrame(() => {\n    accordions.forEach(accordion => {\n      const parent = accordion.closest('.x-accordions')\n      const desiredTransitionDuration = parent ? parent.getAttribute('data-accordion-transition-duration') : accordion.getAttribute('data-accordion-transition-duration') || '0s'\n      setPermanentTransitionDuration(accordion, desiredTransitionDuration)\n      if (accordion.classList.contains('x-accordion-active')) {\n        const blocks = Array.from(accordion.children).filter(child => child.classList.contains('ct-div-block'))\n        const content = blocks[1]\n        if (content) content.style.maxHeight = content.scrollHeight + 'px'\n      }\n    })\n  })\n}\n\ndocument.addEventListener('click', event => {\n  const block = event.target.closest('.ct-div-block')\n  if (!block) return\n  const accordion = block.closest('.x-accordion')\n  if (!accordion) return\n  const blocks = Array.from(accordion.children).filter(child => child.classList.contains('ct-div-block'))\n  const trigger = blocks[0]\n  if (!trigger.contains(block)) return\n  const content = blocks[1]\n  const isActive = accordion.classList.contains('x-accordion-active')\n  const parent = accordion.closest('.x-accordions')\n  const transitionDuration = parent ? parent.getAttribute('data-accordion-transition-duration') : accordion.getAttribute('data-accordion-transition-duration') || '0s'\n  setPermanentTransitionDuration(accordion, transitionDuration)\n  if (parent && parent.getAttribute('data-accordion-multi-collapsable') !== 'true') {\n    const openAccordion = parent.querySelector('.x-accordion.x-accordion-active')\n    if (openAccordion && openAccordion !== accordion) {\n      const openBlocks = Array.from(openAccordion.children).filter(child => child.classList.contains('ct-div-block'))\n      const openContent = openBlocks[1]\n      openAccordion.classList.remove('x-accordion-active')\n      if (openContent) openContent.style.maxHeight = null\n      openAccordion.querySelectorAll('.ct-div-block').forEach(el => removeActiveClasses(el))\n    }\n  }\n  if (isActive) {\n    accordion.classList.remove('x-accordion-active')\n    if (content) content.style.maxHeight = null\n    accordion.querySelectorAll('.ct-div-block').forEach(el => removeActiveClasses(el))\n  } else {\n    accordion.classList.add('x-accordion-active')\n    if (content) {\n      content.style.maxHeight = content.scrollHeight + 'px'\n      content.addEventListener('transitionend', function onTransitionEnd() {\n        content.removeEventListener('transitionend', onTransitionEnd)\n        if (parent && parent.getAttribute('data-accordion-center') === 'true') {\n          const firstBlock = accordion.querySelector('.ct-div-block:first-child')\n          const rect = firstBlock.getBoundingClientRect()\n          const offset = rect.top + window.scrollY - (window.innerHeight / 2) + (rect.height / 2)\n          window.scrollTo({ top: offset, behavior: 'smooth' })\n        }\n      })\n    }\n    accordion.querySelectorAll('.ct-div-block').forEach(el => {\n      applyActiveClasses(el, transitionDuration)\n      el.querySelectorAll('*').forEach(child => applyActiveClasses(child, transitionDuration))\n    })\n  }\n})\n\nwindow.addEventListener('load', () => {\n  setTimeout(() => {\n    const hash = window.location.hash.slice(1)\n    if (!hash) return\n    const accordion = document.getElementById(hash)\n    if (!accordion || !accordion.classList.contains('x-accordion')) return\n    const parent = accordion.closest('.x-accordions')\n    const offsetValue = parent ? parent.getAttribute('data-accordion-anchor') : null\n    const offset = offsetValue ? (offsetValue.endsWith('px') || offsetValue.endsWith('vw') || offsetValue.endsWith('vh') || offsetValue.endsWith('%') ? parseFloat(offsetValue) : 0) : 0\n    const blocks = Array.from(accordion.children).filter(child => child.classList.contains('ct-div-block'))\n    const content = blocks[1]\n    accordion.classList.add('x-accordion-active')\n    if (content) content.style.maxHeight = content.scrollHeight + 'px'\n    const rect = accordion.getBoundingClientRect()\n    const scrollTop = window.scrollY + rect.top - offset\n    window.scrollTo({ top: scrollTop, behavior: 'smooth' })\n    accordion.querySelectorAll('.ct-div-block').forEach(el => {\n      applyActiveClasses(el, '0s')\n      el.querySelectorAll('*').forEach(child => applyActiveClasses(child, '0s'))\n    })\n  }, 0)\n})\n\ndocument.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n  anchor.addEventListener('click', event => {\n    event.preventDefault()\n    const hash = anchor.getAttribute('href').slice(1)\n    const accordion = document.getElementById(hash)\n    if (!accordion || !accordion.classList.contains('x-accordion')) return\n    const parent = accordion.closest('.x-accordions')\n    const offsetValue = parent ? parent.getAttribute('data-accordion-anchor') : null\n    const offset = offsetValue ? (offsetValue.endsWith('px') || offsetValue.endsWith('vw') || offsetValue.endsWith('vh') || offsetValue.endsWith('%') ? parseFloat(offsetValue) : 0) : 0\n    const blocks = Array.from(accordion.children).filter(child => child.classList.contains('ct-div-block'))\n    const content = blocks[1]\n    accordion.classList.add('x-accordion-active')\n    if (content) content.style.maxHeight = content.scrollHeight + 'px'\n    const rect = accordion.getBoundingClientRect()\n    const scrollTop = window.scrollY + rect.top - offset\n    window.scrollTo({ top: scrollTop, behavior: 'smooth' })\n    accordion.querySelectorAll('.ct-div-block').forEach(el => {\n      applyActiveClasses(el, '0s')\n      el.querySelectorAll('*').forEach(child => applyActiveClasses(child, '0s'))\n    })\n  })\n})\n\ninitializeAccordions('.x-accordion')","code-php":"<!---->","unwrap":"false","conditionspreview":"2","globalConditionsResult":true,"useCustomTag":"false"},"nicename":"Code Js And CSS Global"},"depth":2}],"depth":1},"classes":{"x-accordions":{"key":"x-accordions","original":{"width-unit":"%","width":"100","selector-locked":"true"},"nth-child(n) .x-accordion > .ct-div-block:nth-of-type(2)":{"custom-css":"max-height: 0px; overflow: hidden;"}},"x-accordion":{"key":"x-accordion","original":{"width-unit":"%","width":"100","flex-direction":"column","display":"flex","justify-content":"flex-start","selector-locked":"true"}},"x-acc-simple-head":{"key":"x-acc-simple-head","original":{"width-unit":"%","width":"100","padding-top":"15","padding-right":"15","padding-bottom":"13","padding-left":"15","background-color":"#ffffff","border-radius":"6","flex-direction":"row","display":"flex","align-items":"center","justify-content":"space-between","border-top-width":"1","border-right-width":"1","border-bottom-width":"1","border-left-width":"1","border-all-width":"1","border-top-style":"solid","border-right-style":"solid","border-bottom-style":"solid","border-left-style":"solid","border-all-style":"solid","border-top-color":"#f0eeef","border-right-color":"#f0eeef","border-bottom-color":"#f0eeef","border-left-color":"#f0eeef","border-all-color":"#f0eeef","transition-duration":"0.3"}},"x-acc-simple-head-active":{"key":"x-acc-simple-head-active","original":{"border-bottom-left-radius":"0","border-bottom-right-radius":"0","flex-direction":"row","display":"flex","border-bottom-style":"none"}},"x-acc-simple-icon":{"key":"x-acc-simple-icon","original":{"icon-size":"25"}},"x-acc-simple-icon-active":{"key":"x-acc-simple-icon-active","original":{"transform":{"0":{"transform-type":"rotate","rotateAngle":"180"}},"icon-size":"25"}},"x-acc-simple-content":{"key":"x-acc-simple-content","original":{"background-color":"#ffffff","border-bottom-left-radius":"8","border-bottom-right-radius":"8","border-top-width":"1","border-right-width":"1","border-bottom-width":"1","border-left-width":"1","border-all-width":"1","border-top-color":"rgba(240,238,239,0)","border-right-color":"rgba(240,238,239,0)","border-bottom-color":"rgba(240,238,239,0)","border-left-color":"rgba(240,238,239,0)","border-all-color":"rgba(240,238,239,0)","border-top-style":"none","border-right-style":"none","border-bottom-style":"none","border-left-style":"none","border-all-style":"none"}},"x-acc-simple-content-active":{"key":"x-acc-simple-content-active","original":{"border-top-width":"1","border-top-style":"solid","border-top-color":"#f0eeef","border-right-width":"1","border-bottom-width":"1","border-left-width":"1","border-all-width":"1","border-right-style":"solid","border-bottom-style":"solid","border-left-style":"solid","border-all-style":"solid","border-right-color":"#f0eeef","border-bottom-color":"#f0eeef","border-left-color":"#f0eeef","border-all-color":"#f0eeef"}}}}