Update accordion.js (#410)

src/components/accordion/accordion.js

@@ -20,18 +20,18 @@ function createButtons({ textContent }) {
 
 class Accordion {
   constructor(element) {
-    const [expandAll, collapseAll] = Array.from(element.querySelectorAll('.nsw-accordion__toggle button'))
+    this.element = element
+    const [expandAll, collapseAll] = Array.from(this.element.querySelectorAll('.nsw-accordion__toggle button'))
     this.accordionHeadingClass = '.nsw-accordion__title'
-    this.accordion = element
-    this.headings = element.querySelectorAll(this.accordionHeadingClass)
+    this.headings = this.element.querySelectorAll(this.accordionHeadingClass)
     this.expandAllBtn = expandAll
     this.collapseAllBtn = collapseAll
-    this.isExpandedOnLoad = element.querySelectorAll('.nsw-accordion__open')
+    this.isExpandedOnLoad = this.element.querySelectorAll('.nsw-accordion__open')
     this.buttons = []
     this.content = []
-    this.toggleEvent = (e) => this.toggle(e)
-    this.expandAllEvent = (e) => this.expandAll(e)
-    this.collapseAllEvent = (e) => this.collapseAll(e)
+    this.toggleEvent = (event) => this.toggle(event)
+    this.expandAllEvent = (event) => this.expandAll(event)
+    this.collapseAllEvent = (event) => this.collapseAll(event)
   }
 
   init() {
@@ -40,7 +40,7 @@ class Accordion {
   }
 
   setUpDom() {
-    this.accordion.classList.add('ready')
+    this.element.classList.add('ready')
     if (this.collapseAllBtn) {
       this.collapseAllBtn.disabled = true
     }
@@ -53,10 +53,12 @@ class Accordion {
 
       const buttonElem = headingElem.getElementsByTagName('button')[0]
 
-      contentElem.id = buttonElem.getAttribute('aria-controls')
-      contentElem.hidden = true
+      if (contentElem) {
+        contentElem.id = buttonElem.getAttribute('aria-controls')
+        contentElem.hidden = true
+        this.content.push(contentElem)
+      }
 
-      this.content.push(contentElem)
       this.buttons.push(buttonElem)
     })
 
@@ -97,20 +99,22 @@ class Accordion {
     }
   }
 
-  toggle(e) {
-    const { currentTarget } = e
+  toggle(event) {
+    const { currentTarget } = event
     const targetContent = this.getTargetContent(currentTarget)
-    const isHidden = targetContent.hidden
-
-    if ((isHidden)) {
-      this.setAccordionState(currentTarget, 'open')
-    } else {
-      this.setAccordionState(currentTarget, 'close')
-    }
-
-    if (this.expandAllBtn && this.collapseAllBtn) {
-      this.expandAllBtn.disabled = this.content.every((item) => item.hidden === false)
-      this.collapseAllBtn.disabled = this.content.every((item) => item.hidden === true)
+    if (targetContent) {
+      const isHidden = targetContent.hidden
+
+      if ((isHidden)) {
+        this.setAccordionState(currentTarget, 'open')
+      } else {
+        this.setAccordionState(currentTarget, 'close')
+      }
+
+      if (this.expandAllBtn && this.collapseAllBtn) {
+        this.expandAllBtn.disabled = this.content.every((item) => item.hidden === false)
+        this.collapseAllBtn.disabled = this.content.every((item) => item.hidden === true)
+      }
     }
   }