Открытие аккордеона на JS

Сейчас мой код открывает аккордеон при клике на '+', нужно чтобы открывал при клике на всю блочную часть

Мой код :

(function () {
  let accordionItems = document.querySelectorAll('.accordion');
  let accordionPanes = document.querySelectorAll('.accordion__pane');

  let hidePane = function (button, pane) {
    button.classList.add('accordion__toggle--inactive');
    pane.classList.add('accordion__pane--hidden');
  };

  let showPane = function (button, pane) {
    button.classList.remove('accordion__toggle--inactive');
    pane.classList.remove('accordion__pane--hidden');
  };

  let toggleAccordion = function (evt) {
    Array.prototype.forEach.call(accordionPanes, function (accordionPane) {
      let button = accordionPane
          .closest('.accordion')
          .querySelector('.accordion__toggle');
      if (
        (button === evt.target &&
          !button.classList.contains('accordion__toggle--inactive')) ||
        button !== evt.target
      ) {
        hidePane(button, accordionPane);
      } else if (button === evt.target) {
        showPane(button, accordionPane);
      }
    });
  };

  Array.prototype.forEach.call(accordionItems, function (accordion) {
    let accordionToggleButton = accordion.querySelector('.accordion__toggle');
    let accordionPane = accordion.querySelector('.accordion__pane');
    hidePane(accordionToggleButton, accordionPane);
    accordionToggleButton.addEventListener('click', toggleAccordion);
  });
})();
<footer class="page-footer">
      <div class="page-footer__wrapper wrapper">
        <div class="page-footer__base">
          <a class="page-footer__logo-link" aria-label="Логотип 'Smart Device'">
            <img class="page-footer__logo page-footer__logo--desktop" width="202" height="52" src="./img/logo-smart-device.svg" alt="logo-footer">
          </a>
          <ul class="page-footer__social social">
            <li class="social__item">
              <a class="social__link social__link--facebook" href="#">Мы в Фейсбуке</a>
            </li>
            <li class="social__item">
              <a class="social__link social__link--odnoklassniki" href="#">Мы в Одноклассниках</a>
            </li>
            <li class="social__item">
              <a class="social__link social__link--vkontakte" href="#">Мы в ВКонтакте</a>
            </li>
          </ul>
        </div>
        <div class="page-footer__nav nav accordion">
          <div class="nav__heading-block">
            <h2 class="nav__header">Разделы сайта</h2>
            <button class="nav__toggle accordion__toggle" type="button"><span class="visually-hidden">Показать/Спрятать
                разделы сайта</span></button>
          </div>
          <ul class="nav__list accordion__pane">
            <li class="nav__item"><a href="#" class="nav__link">О компании</a> </li>
            <li class="nav__item"><a href="#" class="nav__link">Комплектующие</a></li>
            <li class="nav__item"><a href="#" class="nav__link">Продукты</a></li>
            <li class="nav__item"><a href="#" class="nav__link">Доставка</a></li>
            <li class="nav__item"><a href="#" class="nav__link">Производство печатных плат</a></li>
            <li class="nav__item"><a href="#" class="nav__link">Контакты</a></li>
            <li class="nav__item"><a href="#" class="nav__link">Монтаж печатных плат</a></li>
          </ul>
        </div>
        <div class="page-footer__contacts contacts accordion">
          <div class="contacts__heading-block">
            <h2 class="contacts__header">Наш офис</h2>
            <button class="contacts__toggle accordion__toggle" type="button"><span
                class="visually-hidden">Показать/Спрятать контактную информацию</span></button>
          </div>
          <ul class="contacts__list accordion__pane">
            <li class="contacts__item"><span class="contacts__address">г. Мытищи, Олимпийский проспект, д.10</span></li>
            <li class="contacts__item"><a href="tel:+74955894050" class="contacts__link">+7 (495) 589-40-50</a></li>
            <li class="contacts__item"><a href="tel:+79250038767" class="contacts__link">+7 (925) 389-58-29</a></li>
            <li class="contacts__item"><a href="tel:+792692608079" class="contacts__link">+7 (925) 364-78-13</a></li>
          </ul>
        </div>
      </div>
    </footer>

Ответы (0 шт):