export class InfoSection extends HTMLElement {
    constructor(header, subheaders) {
        super();
        this.innerHTML = `
            <div id='infoSectionContainer'> 
                <div id=${this.formatHeader(header)} class='infoSectionHeader'>
                    <h3 id='header'>
                    ${header}
                    <div id='expand-collapse' class='expand-collapse'>
                        [+]
                    </div>
                    </h3>
                </div>
                <div id='subheaders' class='hidden'>
                    <div id='generalDescription'></div>
                </div>
                <div class='section-break'></div>
            </div>
        `;
        this.header = header;
        this.subheaders = subheaders;
        this.sectionDivs = {};
        this.expanded = false;
    }

    connectedCallback() {
        const header = this.querySelector('#header');
        const subsections = this.querySelector('#subheaders');
        const expandCollapse = this.querySelector('#expand-collapse');

        const expandSection = () => {
            subsections.classList.remove('hidden');
            expandCollapse.innerHTML = '[-]';
            this.expanded = true;
        }
        const contractSection = () => {
            subsections.classList.add('hidden');
            expandCollapse.innerHTML = '[+]';
            this.expanded = false;
        }

        header.onclick = () => {
            if (this.expanded) {
                contractSection();
            } else {
                expandSection();
            }
        }
        header.onmouseover = () => {
            expandCollapse.classList.add('hover');
        }
        header.onmouseout = () => {
            expandCollapse.classList.remove('hover');
        }

        this.sectionDivs[this.header] = this.querySelector('#generalDescription');
        for (var subheader of this.subheaders) {
            var div = document.createElement('div');
            div.id = this.formatHeader(subheader);
            var h4 = document.createElement('h4');
            h4.innerHTML = subheader;
            div.appendChild(h4);
            subsections.appendChild(div);
            this.sectionDivs[subheader] = div;
        }
    }

    formatHeader(header) {
        return header.replace(' ', '-');
    }

    updateDescription(subheader, description) {
        const subSection = this.sectionDivs[subheader];
        if (subSection == null) {
            return;
        }
        var p = document.createElement('p');
        p.innerHTML = description;
        subSection.appendChild(p);
    }
}

window.customElements.define('info-section', InfoSection);
@@ -876,53 +876,97 @@
     
-const header = this.querySelector('#h
+this.initializeHeader();%0A        this.createSubHeaders();%0A    %7D%0A%0A    initializeH
 eader
-');
+() %7B
 %0A   
@@ -976,27 +976,22 @@
   const 
-subsections
+header
  = this.
@@ -1006,26 +1006,22 @@
 ector('#
-sub
 header
-s
 ');%0A    
@@ -1100,27 +1100,22 @@
     
-const expandSection
+header.onclick
  = (
@@ -1137,94 +1137,94 @@
     
-subsections.classList.remove('hidden');%0A            expandCollapse.innerHTML = '%5B-%5D';%0A
+if (this.expanded) %7B%0A                this.contractSection();%0A            %7D else %7B%0A    
     
@@ -1246,17 +1246,17 @@
 pand
-ed = true
+Section()
 ;%0A  
@@ -1253,32 +1253,36 @@
 tion();%0A        
+ 
+   
 %7D%0A        const 
@@ -1279,29 +1279,36 @@
     
-const contractSection
+%7D%0A        header.onmouseover
  = (
@@ -1326,27 +1326,30 @@
         
-subsections
+expandCollapse
 .classLi
@@ -1357,21 +1357,20 @@
 t.add('h
-idden
+over
 ');%0A    
@@ -1377,45 +1377,45 @@
     
-    expandCollapse.innerHTML = '%5B+%5D';
+%7D%0A        header.onmouseout = () =%3E %7B
 %0A   
@@ -1423,37 +1423,56 @@
         
-this.
 expand
-ed = false
+Collapse.classList.remove('hover')
 ;%0A      
@@ -1479,118 +1479,180 @@
   %7D%0A
-%0A
     
+%7D%0A%0A
     
-header.onclick = () =%3E %7B%0A            if (this.expanded) %7B%0A                contractSection(
+expandSection() %7B%0A        const subsections = this.querySelector('#subheaders');%0A        const expandCollapse = this.querySelector('#expand-collapse'
 );%0A
+%0A
         
     
@@ -1651,141 +1651,305 @@
     
-    %7D else %7B%0A                expandSection();%0A        
+subsections.classList.remove('hidden');%0A        expandCollapse.innerHTML = '%5B-%5D';%0A        this.expanded = true;%0A
     %7D%0A
+%0A
     
- 
+contractSection() %7B%0A
    
-%7D%0A
      
-   header.onmouseover = () =%3E %7B%0A            
+const subsections = this.querySelector('#subheaders');%0A        const expandCollapse = this.querySelector('#
 expand
-C
+-c
 ollapse
+');%0A%0A        subsections
 .cla
@@ -1953,36 +1953,37 @@
 classList.add('h
-over
+idden
 ');%0A        %7D%0A  
@@ -1982,111 +1982,168 @@
     
-%7D%0A        header.onmouseout = () =%3E %7B%0A            expandCollapse.classList.remove('hov
+expandCollapse.innerHTML = '%5B+%5D';%0A        this.expanded = false;%0A    %7D%0A%0A    createSubHeaders() %7B%0A        const subsections = this.querySelector('#subhead
 er
+s
 ');%0A
-        %7D%0A%0A
     
@@ -2234,19 +2234,19 @@
    for (
-var
+let
  subhead
@@ -2282,19 +2282,19 @@
         
-var
+let
  div = d
@@ -2386,19 +2386,19 @@
         
-var
+let
  h4 = do
@@ -2857,11 +2857,11 @@
     
-var
+let
  p =

REFACTOR infoSection