https://www.nissay.co.jp/assets/js/modules/localNav/toggleSP.js

1/**
2 * SPのみトグル
3 */
4class ToggleSP {
5  isOpen = false;
6
7  /**
8   * @param {HTMLElement} root
9   * @param {number} index
10   */
11  constructor(root, index) {
12    this.elements = {
13      root,
14      button: root.querySelector('.js-toggle-sp-button'),
15      content: root.querySelector('.js-toggle-sp-content'),
16    };
17    this.toggleID = `toggle-${index + 1}`;
18  }
19
20  init() {
21    this.setAttr();
22    this.bindEvent();
23
24    if (this.elements.root.classList.contains('is-current')) {
25      this.openToggle();
26    }
27  }
28
29  /**
30   * 属性付与
31   */
32  setAttr() {
33    this.elements.button.setAttribute('aria-expanded', false);
34    this.elements.button.setAttribute('aria-controls', this.toggleID);
35    this.elements.content.id = this.toggleID;
36  }
37
38  /**
39   * イベントバインド
40   */
41  bindEvent() {
42    this.elements.button.addEventListener('click', this.handleClick.bind(this));
43  }
44
45  /**
46   * クリック時処理
47   */
48  handleClick() {
49    if (this.isOpen) {
50      this.closeToggle();
51    } else {
52      this.openToggle();
53    }
54  }
55
56  /**
57   * 開く
58   */
59  openToggle() {
60    this.elements.root.classList.add('is-open');
61    this.elements.button.setAttribute('aria-expanded', true);
62    this.isOpen = true;
63  }
64
65  /**
66   * 閉じる
67   */
68  closeToggle() {
69    this.elements.root.classList.remove('is-open');
70    this.elements.button.setAttribute('aria-expanded', false);
71    this.isOpen = false;
72  }
73}
74
75export function toggleSP() {
76  const roots = document.querySelectorAll('.js-toggle-sp');
77
78  roots.forEach((root, index) => {
79    new ToggleSP(root, index).init();
80  });
81}