https://www.wbblawyers.com/js/body

1// Accordion JS
2    class mwAccordion {
3    constructor(config) {
4      this.state = config.state;
5      this.accordion = document.querySelector('[data-accordion="' + config.accordion + '"]');
6      this.accordionItems = Array.from(this.accordion.querySelectorAll('[data-accordion-item]'));
7      this.accordionTriggers = Array.from(this.accordion.querySelectorAll('[data-accordion-trigger]'));
8      this.accordionContent = Array.from(this.accordion.querySelectorAll('[data-accordion-content]'));
9      this.init(this.state);
10    }
11  
12    setHeight() {
13      this.accordionContent.forEach(i => i.dataset['accordionHeight'] = i.offsetHeight);
14    }
15    toggleAccordion(thisItem, item) {
16      if (thisItem.classList.contains('active')) {
17        this.closeAccordion(item);
18        return;
19      }
20  
21      if (!thisItem.classList.contains('active')) {
22        this.openAccordion(item);
23        return;
24      }
25    }
26  
27    openAccordion(item) {
28      item.style.display = 'block';
29      const height = item.dataset['accordionHeight'];
30      item.style.height = 0;
31      item.parentElement.classList.add('active');
32      item.style.paddingTop = '';
33      item.style.paddingBottom = '';
34      item.style.height = "".concat(height, "px");
35    }
36  
37    closeAccordion(item) {
38      item.parentElement.classList.remove('active');
39      item.style.paddingTop = 0;
40      item.style.paddingBottom = 0;
41      item.style.height = 0;
42    }
43  
44    accordionEvent() {
45      this.accordionTriggers.forEach(i => {
46        i.addEventListener('click', () => {
47          this.toggleAccordion(i.parentElement, i.nextElementSibling);
48        })
49      })
50    }
51  
52    setState(state) {
53      //State 1 = only first item starts expanded/all others start collapsed
54      if (state === 1) {
55        this.accordionContent.forEach((item, index) => {
56          item.style.height = item.dataset['accordionHeight'] + 'px';
57          
58          if (index !== 0) {
59            this.closeAccordion(item);
60          }
61        });
62        this.accordionItems[0].classList.add('active');
63        return;
64      }
65    
66      //State 2 = all items start expanded
67      if (state === 2) {
68        this.accordionContent.forEach(function (item) {
69          item.parentElement.classList.add('active');
70          item.style.height = item.dataset['accordionHeight'] + 'px';
71        });
72        return;
73      }
74    
75      //State 3 all items start collapsed
76      if (state === 3) {
77        this.accordionContent.forEach(i => {
78          return this.closeAccordion(i);
79        });
80        return;
81      }
82    }
83  
84    init(state) {
85      if ( !this.accordion ) return;
86      this.setHeight();
87      this.accordionEvent();
88      this.setState(state);
89    }
90  }
91  
92  new mwAccordion({
93    state: 3, //1 = only first item open | 2 = all open | 3 = all closed
94    accordion: 'mw_accordion-1'
95  })
96  
97  new mwAccordion({
98    state: 3, //1 = only first item open | 2 = all open | 3 = all closed
99    accordion: 'mw_accordion-2'
100  })
101  
102    new mwAccordion({
103    state: 3, //1 = only first item open | 2 = all open | 3 = all closed
104    accordion: 'mw_accordion-3'
105  })
106  
107    new mwAccordion({
108    state: 3, //1 = only first item open | 2 = all open | 3 = all closed
109    accordion: 'mw_accordion-4'
110  })