Bricks Example Run Once code with Accordion

template.json

{"content":[{"id":"eada11","name":"section","parent":0,"children":["hzsuiu","gbxdvt"],"settings":{}},{"id":"hzsuiu","name":"container","parent":"eada11","children":["dbxacc"],"settings":[]},{"id":"dbxacc","name":"block","parent":"hzsuiu","children":["iamhht","abvaos"],"settings":{"_cssGlobalClasses":["hrqmoc"]},"label":"WPEasy Accordion (CSS)"},{"id":"iamhht","name":"accordion-nested","parent":"dbxacc","children":["pchmwm","viyjzy"],"settings":{"_cssGlobalClasses":["eikstu"]}},{"id":"pchmwm","name":"block","parent":"iamhht","children":["jhnvvm","kljwky"],"settings":{"_cssGlobalClasses":["ozntht"]},"label":"Item"},{"id":"jhnvvm","name":"block","parent":"pchmwm","children":["wnkirt"],"settings":{"_alignItems":"center","_direction":"row","_justifyContent":"space-between","_hidden":{"_cssClasses":"accordion-title-wrapper"},"tag":"custom","customTag":"h3","_cssGlobalClasses":["dfpgrd"]},"label":"Heading"},{"id":"wnkirt","name":"block","parent":"jhnvvm","children":["fknsni","jajptx"],"settings":{"tag":"custom","customTag":"button","_cssGlobalClasses":["ghaykt"]},"label":"Button"},{"id":"fknsni","name":"text-basic","parent":"wnkirt","children":[],"settings":{"text":"Heading 1","tag":"span","_cssGlobalClasses":["cbklmi"]},"label":"Span"},{"id":"jajptx","name":"icon","parent":"wnkirt","children":[],"settings":{"icon":{"icon":"ion-ios-arrow-forward","library":"ionicons"},"iconSize":"1em","_cssGlobalClasses":["apjasa"]}},{"id":"kljwky","name":"block","parent":"pchmwm","children":["cbiynf"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"},"_cssGlobalClasses":["thqtnq"]},"label":"Accordion Panel"},{"id":"cbiynf","name":"text","parent":"kljwky","children":[],"settings":{"text":"Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem.","_cssGlobalClasses":["fdykbd"]}},{"id":"viyjzy","name":"block","parent":"iamhht","children":["ktetfv","xfptrg"],"settings":{"_cssGlobalClasses":["ozntht"]},"label":"Item"},{"id":"ktetfv","name":"block","parent":"viyjzy","children":["voanot"],"settings":{"_alignItems":"center","_direction":"row","_justifyContent":"space-between","_hidden":{"_cssClasses":"accordion-title-wrapper"},"tag":"custom","customTag":"h3","_cssGlobalClasses":["dfpgrd"]},"label":"Heading"},{"id":"voanot","name":"block","parent":"ktetfv","children":["lureqf","hwvkih"],"settings":{"tag":"custom","customTag":"button","_cssGlobalClasses":["ghaykt"]},"label":"Button"},{"id":"lureqf","name":"text-basic","parent":"voanot","children":[],"settings":{"text":"Heading 1","tag":"span","_cssGlobalClasses":["cbklmi"]},"label":"Span"},{"id":"hwvkih","name":"icon","parent":"voanot","children":[],"settings":{"icon":{"icon":"ion-ios-arrow-forward","library":"ionicons"},"iconSize":"1em","_cssGlobalClasses":["apjasa"]}},{"id":"xfptrg","name":"block","parent":"viyjzy","children":["tgbwwh"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"},"_cssGlobalClasses":["thqtnq"]},"label":"Accordion Panel"},{"id":"tgbwwh","name":"text","parent":"xfptrg","children":[],"settings":{"text":"Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem.","_cssGlobalClasses":["fdykbd"]}},{"id":"gbxdvt","name":"container","parent":"eada11","children":["rdaqsh"],"settings":{}},{"id":"rdaqsh","name":"block","parent":"gbxdvt","children":["qzdaur","qhuhhh"],"settings":{"_cssGlobalClasses":["hrqmoc"]},"label":"WPEasy Accordion (CSS)"},{"id":"qzdaur","name":"accordion-nested","parent":"rdaqsh","children":["dvtgbh","nvppuc"],"settings":{"_cssGlobalClasses":["eikstu"],"independentToggle":true,"expandFirstItem":true}},{"id":"dvtgbh","name":"block","parent":"qzdaur","children":["qltmyg","indhud"],"settings":{"_cssGlobalClasses":["ozntht"]},"label":"Item"},{"id":"qltmyg","name":"block","parent":"dvtgbh","children":["ndjxfk"],"settings":{"_alignItems":"center","_direction":"row","_justifyContent":"space-between","_hidden":{"_cssClasses":"accordion-title-wrapper"},"tag":"custom","customTag":"h3","_cssGlobalClasses":["dfpgrd"]},"label":"Heading"},{"id":"ndjxfk","name":"block","parent":"qltmyg","children":["zwfwej","xabpqn"],"settings":{"tag":"custom","customTag":"button","_cssGlobalClasses":["ghaykt"]},"label":"Button"},{"id":"zwfwej","name":"text-basic","parent":"ndjxfk","children":[],"settings":{"text":"Heading 1","tag":"span","_cssGlobalClasses":["cbklmi"]},"label":"Span"},{"id":"xabpqn","name":"icon","parent":"ndjxfk","children":[],"settings":{"icon":{"icon":"ion-ios-arrow-forward","library":"ionicons"},"iconSize":"1em","_cssGlobalClasses":["apjasa"]}},{"id":"indhud","name":"block","parent":"dvtgbh","children":["hnocpj"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"},"_cssGlobalClasses":["thqtnq"]},"label":"Accordion Panel"},{"id":"hnocpj","name":"text","parent":"indhud","children":[],"settings":{"text":"Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem.","_cssGlobalClasses":["fdykbd"]}},{"id":"nvppuc","name":"block","parent":"qzdaur","children":["idpvhr","qcpvbc"],"settings":{"_cssGlobalClasses":["ozntht"]},"label":"Item"},{"id":"idpvhr","name":"block","parent":"nvppuc","children":["bvwnle"],"settings":{"_alignItems":"center","_direction":"row","_justifyContent":"space-between","_hidden":{"_cssClasses":"accordion-title-wrapper"},"tag":"custom","customTag":"h3","_cssGlobalClasses":["dfpgrd"]},"label":"Heading"},{"id":"bvwnle","name":"block","parent":"idpvhr","children":["reyepc","otawam"],"settings":{"tag":"custom","customTag":"button","_cssGlobalClasses":["ghaykt"]},"label":"Button"},{"id":"reyepc","name":"text-basic","parent":"bvwnle","children":[],"settings":{"text":"Heading 1","tag":"span","_cssGlobalClasses":["cbklmi"]},"label":"Span"},{"id":"otawam","name":"icon","parent":"bvwnle","children":[],"settings":{"icon":{"icon":"ion-ios-arrow-forward","library":"ionicons"},"iconSize":"1em","_cssGlobalClasses":["apjasa"]}},{"id":"qcpvbc","name":"block","parent":"nvppuc","children":["deeady"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"},"_cssGlobalClasses":["thqtnq"]},"label":"Accordion Panel"},{"id":"deeady","name":"text","parent":"qcpvbc","children":[],"settings":{"text":"Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem.","_cssGlobalClasses":["fdykbd"]}},{"id":"abvaos","name":"code","parent":"dbxacc","children":[],"settings":{"noRoot":true,"signature":"643cdcb10fe203f2243e6091e264ca49","user_id":1,"time":1726526094,"executeCode":true,"javascriptCode":"/*-----------------------------------------\nRECOMMENDATION:\n  Remove this from the Bricks Editor and put\n  in a Code Manager or child theme.\n\n  window.WPE is only required so we can have multiple instances\n  in the Editor and keep track of state, e.g. to only run once.\n  If you delete the instances from the Editor, you no longer need\n  to track the state.\n-----------------------------------------*/\n\n/*-----------------------------------------\n  Common object to track WPE Scripts State \n  -----------------------------------------*/\nwindow.WPE = window.WPE || { scripts: [] };\n\n/*-----------------------------------------\n  This script.\n  */\n\n(() => {\n  const scriptName = \"wpeAccordion\";\n\n  class MainClass {\n    constructor() {\n      this.debug = false;\n      /* Selector definitions */\n      this.accordionBlockClass = '.wpeasy-accordion';\n      this.itemSelector = this.accordionBlockClass + '__item';\n      this.buttonSelector = this.accordionBlockClass + '__button';\n      this.accordionPanelSelector = this.accordionBlockClass + '__accordion-panel';\n\n      this.allAccordionBlocks = document.querySelectorAll(this.accordionBlockClass);\n      this.allAccordionPanels = document.querySelectorAll(this.accordionPanelSelector);\n      this.allButtons = document.querySelectorAll(this.buttonSelector);\n\n      this.init();\n    }\n\n    /* methods*/\n\n    debugLog(...obj) {\n      if (this.debug) {\n        console.log(obj);\n      }\n    }\n\n    generateRandomString(length) {\n      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';\n      let result = '';\n\n      for (let i = 0; i < length; i++) {\n        const randomIndex = Math.floor(Math.random() * characters.length);\n        result += characters.charAt(randomIndex);\n      }\n      return result;\n    }\n\n    setOpenState(buttonElement) {\n      this.debugLog('setOpenState', buttonElement);\n      const currentItem = buttonElement.closest(this.itemSelector);\n      const block = currentItem.closest(this.accordionBlockClass);\n      const classList = currentItem.classList;\n      const isOpen = classList.contains('wpe-open');\n\n      const scriptArgs = this.getScriptArgs(block);\n\n      if (!scriptArgs || !scriptArgs.includes('independentToggle')) {\n        this.debugLog('No independent toggle');\n        //remove wpe from all block items other than this\n        block.querySelectorAll(this.buttonSelector).forEach(element => {\n          this.debugLog(element);\n          if (buttonElement !== element) {\n            this.setClosedState(element);\n          }\n        });\n\n      }\n\n      if (isOpen) {\n        this.setClosedState(buttonElement);\n      } else {\n        currentItem.classList.add('wpe-open');\n        buttonElement.setAttribute('aria-expanded', true);\n      }\n    }\n\n    setClosedState(buttonElement) {\n      buttonElement.closest(this.itemSelector).classList.remove('wpe-open');\n      buttonElement.setAttribute('aria-expanded', false);\n    }\n\n    setAllAriaExpandedToFalse(block) {\n      const blockItems = block.querySelectorAll(this.itemSelector);\n      blockItems.forEach(item => {\n        item.querySelector(this.buttonSelector).setAttribute('aria-expanded', false);\n      });\n    }\n\n    getScriptArgs(block) {\n      const scriptArgsEl = block.querySelector('[data-script-args]');\n      if (scriptArgsEl) {\n        return scriptArgsEl.dataset.scriptArgs.split(',');\n      } else {\n        return false;\n      }\n    }\n\n    init() {\n      this.allAccordionPanels.forEach(el => {\n        if (!el.id) {\n          el.id = 'wpe-' + this.generateRandomString(5);\n        }\n      });\n      this.allButtons.forEach(el => {\n        if (!el.id) {\n          el.id = 'wpe-' + this.generateRandomString(5);\n        }\n      });\n\n      this.allButtons.forEach(button => {\n        button.addEventListener('click', event => {\n          const { currentTarget } = event;\n          this.setOpenState(currentTarget);\n        })\n      });\n\n      this.allAccordionBlocks.forEach(block => {\n        const myItems = block.querySelectorAll(this.itemSelector);\n        myItems.forEach((item, index) => {\n          const button = item.querySelector(this.buttonSelector);\n          const panel = item.querySelector(this.accordionPanelSelector);\n\n          button.setAttribute('aria-controls', panel.id);\n          panel.setAttribute('aria-labelledby', button.id);\n          panel.setAttribute('role', 'region');\n        });\n\n        this.setAllAriaExpandedToFalse(block);\n\n        const scriptArgs = this.getScriptArgs(block);\n        if (scriptArgs) {\n          if (scriptArgs.includes('expandFirstItem')) {\n            this.setOpenState(myItems[0]);\n          }\n        }\n      });\n    }\n\n  }\n  /* only create an instance if one does not exist */\n  document.addEventListener('DOMContentLoaded', () => {\n    if (!window.WPE.scripts[scriptName]) {\n      window.WPE.scripts[scriptName] = new MainClass();\n    }\n  })\n\n})();"}},{"id":"qhuhhh","name":"code","parent":"rdaqsh","children":[],"settings":{"noRoot":true,"signature":"643cdcb10fe203f2243e6091e264ca49","user_id":1,"time":1726526094,"executeCode":true,"javascriptCode":"/*-----------------------------------------\nRECOMMENDATION:\n  Remove this from the Bricks Editor and put\n  in a Code Manager or child theme.\n\n  window.WPE is only required so we can have multiple instances\n  in the Editor and keep track of state, e.g. to only run once.\n  If you delete the instances from the Editor, you no longer need\n  to track the state.\n-----------------------------------------*/\n\n/*-----------------------------------------\n  Common object to track WPE Scripts State \n  -----------------------------------------*/\nwindow.WPE = window.WPE || { scripts: [] };\n\n/*-----------------------------------------\n  This script.\n  */\n\n(() => {\n  const scriptName = \"wpeAccordion\";\n\n  class MainClass {\n    constructor() {\n      this.debug = false;\n      /* Selector definitions */\n      this.accordionBlockClass = '.wpeasy-accordion';\n      this.itemSelector = this.accordionBlockClass + '__item';\n      this.buttonSelector = this.accordionBlockClass + '__button';\n      this.accordionPanelSelector = this.accordionBlockClass + '__accordion-panel';\n\n      this.allAccordionBlocks = document.querySelectorAll(this.accordionBlockClass);\n      this.allAccordionPanels = document.querySelectorAll(this.accordionPanelSelector);\n      this.allButtons = document.querySelectorAll(this.buttonSelector);\n\n      this.init();\n    }\n\n    /* methods*/\n\n    debugLog(...obj) {\n      if (this.debug) {\n        console.log(obj);\n      }\n    }\n\n    generateRandomString(length) {\n      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';\n      let result = '';\n\n      for (let i = 0; i < length; i++) {\n        const randomIndex = Math.floor(Math.random() * characters.length);\n        result += characters.charAt(randomIndex);\n      }\n      return result;\n    }\n\n    setOpenState(buttonElement) {\n      this.debugLog('setOpenState', buttonElement);\n      const currentItem = buttonElement.closest(this.itemSelector);\n      const block = currentItem.closest(this.accordionBlockClass);\n      const classList = currentItem.classList;\n      const isOpen = classList.contains('wpe-open');\n\n      const scriptArgs = this.getScriptArgs(block);\n\n      if (!scriptArgs || !scriptArgs.includes('independentToggle')) {\n        this.debugLog('No independent toggle');\n        //remove wpe from all block items other than this\n        block.querySelectorAll(this.buttonSelector).forEach(element => {\n          this.debugLog(element);\n          if (buttonElement !== element) {\n            this.setClosedState(element);\n          }\n        });\n\n      }\n\n      if (isOpen) {\n        this.setClosedState(buttonElement);\n      } else {\n        currentItem.classList.add('wpe-open');\n        buttonElement.setAttribute('aria-expanded', true);\n      }\n    }\n\n    setClosedState(buttonElement) {\n      buttonElement.closest(this.itemSelector).classList.remove('wpe-open');\n      buttonElement.setAttribute('aria-expanded', false);\n    }\n\n    setAllAriaExpandedToFalse(block) {\n      const blockItems = block.querySelectorAll(this.itemSelector);\n      blockItems.forEach(item => {\n        item.querySelector(this.buttonSelector).setAttribute('aria-expanded', false);\n      });\n    }\n\n    getScriptArgs(block) {\n      const scriptArgsEl = block.querySelector('[data-script-args]');\n      if (scriptArgsEl) {\n        return scriptArgsEl.dataset.scriptArgs.split(',');\n      } else {\n        return false;\n      }\n    }\n\n    init() {\n      this.allAccordionPanels.forEach(el => {\n        if (!el.id) {\n          el.id = 'wpe-' + this.generateRandomString(5);\n        }\n      });\n      this.allButtons.forEach(el => {\n        if (!el.id) {\n          el.id = 'wpe-' + this.generateRandomString(5);\n        }\n      });\n\n      this.allButtons.forEach(button => {\n        button.addEventListener('click', event => {\n          const { currentTarget } = event;\n          this.setOpenState(currentTarget);\n        })\n      });\n\n      this.allAccordionBlocks.forEach(block => {\n        const myItems = block.querySelectorAll(this.itemSelector);\n        myItems.forEach((item, index) => {\n          const button = item.querySelector(this.buttonSelector);\n          const panel = item.querySelector(this.accordionPanelSelector);\n\n          button.setAttribute('aria-controls', panel.id);\n          panel.setAttribute('aria-labelledby', button.id);\n          panel.setAttribute('role', 'region');\n        });\n\n        this.setAllAriaExpandedToFalse(block);\n\n        const scriptArgs = this.getScriptArgs(block);\n        if (scriptArgs) {\n          if (scriptArgs.includes('expandFirstItem')) {\n            this.setOpenState(myItems[0]);\n          }\n        }\n      });\n    }\n\n  }\n  /* only create an instance if one does not exist */\n  document.addEventListener('DOMContentLoaded', () => {\n    if (!window.WPE.scripts[scriptName]) {\n      window.WPE.scripts[scriptName] = new MainClass();\n    }\n  })\n\n})();"}}],"source":"bricksCopiedElements","sourceUrl":"https://acss-at-based.local","version":"1.10.3","globalClasses":[{"id":"hrqmoc","name":"wpeasy-accordion","settings":{"_cssCustom":"\n.wpeasy-accordion {\n  --transition: all 0.4s ease;\n  \n\t--button-padding-block: 2rem;\n  --button-padding-inline: 2rem;\n  --button-border-radius: 0.5rem;\n  --button-border: 1px solid #aaa;\n  --button-background: #ccc; \n  --button-color: black;\n  --button-font-size: 1.6rem;\n  --button-font-weight: bold;\n  --button-background-expaned: #56a3e2;\n  --button-color-expanded: white;\n  --button-border-expanded: 1px solid #00aaff;\n}\n\n.wpeasy-accordion__button {\n  transition: var(--transition);\n\tdisplay: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding-block: var(--button-padding-block);\n  padding-inline: var(--button-padding-inline);\n  line-height: 1;\n  background: var(--button-background);\n  font-size: var(--button-font-size);\n  font-weight: var(--button-font-weight);\n  border-radius: var(--button-border-radius);\n  border: var(--button-border);\n} \n\n.wpeasy-accordion__item.wpe-open .wpeasy-accordion__button {\n\tcolor: var(--button-color-expanded);\n  border: var(--button-border-expaned);\n  background: var(--button-background-expaned);\n}\n\n.wpeasy-accordion__icon {\n\tfont-size: 1em;\n  transition: var(--transition);\n}\n.wpeasy-accordion__item.wpe-open .wpeasy-accordion__icon {\n  transform: rotate(90deg);\n}\n\n.wpeasy-accordion__accordion-panel {\n\tpadding-block: 2rem;\n  padding-inline: 2rem;\n}"},"cat":false},{"id":"eikstu","name":"wpeasy-accordion__accordion-nested","settings":[],"cat":false},{"id":"ozntht","name":"wpeasy-accordion__item","settings":[],"cat":false},{"id":"dfpgrd","name":"wpeasy-accordion__heading","settings":{"_alignItems":"center","_direction":"row","_justifyContent":"space-between"},"cat":false},{"id":"ghaykt","name":"wpeasy-accordion__button","settings":[],"cat":false},{"id":"cbklmi","name":"wpeasy-accordion__span","settings":[],"cat":false},{"id":"apjasa","name":"wpeasy-accordion__icon","settings":{"iconSize":"1em"},"cat":false},{"id":"thqtnq","name":"wpeasy-accordion__accordion-panel","settings":[],"cat":false},{"id":"fdykbd","name":"wpeasy-accordion__text","settings":[],"cat":false}],"globalElements":[]}