Открытие блока при клике 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);
  });
})();

    .nav__heading-block {
  margin-bottom: 15px;
  padding-left: 2px;
background-color:blue
}

.nav__header {
  font-family: "Roboto Condensed", "Arial", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 16px;
  margin: 0;
  letter-spacing: 0.76px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.nav__toggle {
  display: none;
}

.nav__list {
background-color:blue
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}

.nav__item {
  min-width: 235px;
  margin-right: 15px;
  list-style: none;
}

.nav__link {
  font-size: 15px;
  line-height: 25px;
  opacity: 0.5;
  color: rgba(255, 255, 255, 0.7);
}

.nav__link:hover,
.nav__link:focus {
  opacity: 0.7;
}

.nav__link:active {
  opacity: 0.3;
}

.page-footer__nav {
  -ms-flex-negative: 5;
  flex-shrink: 5;
  width: 558px;
  margin: 0;
  padding: 0;
}

.accordion__toggle {
    display: block;
    width: 25px;
    height: 25px;
    cursor: pointer;
    border: 0;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg fill='none' height='2' viewBox='0 0 16 2' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 .5h16v1h-16z' fill='%23c4c4c4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
  }

  .accordion__toggle:hover,
  .accordion__toggle:focus {
    opacity: 0.7;
  }

  .accordion__toggle:active {
    opacity: 0.5;
  }

  .accordion__toggle--inactive {
    background-image: url("data:image/svg+xml,%3Csvg fill='none' height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='m8.5 7.5v-7.5h-1v7.5h-7.5v1h7.5v7.5h1v-7.5h7.5v-1z' fill='%23c4c4c4' fill-rule='evenodd'/%3E%3C/svg%3E");
  }

  .accordion__pane--hidden {
    display: none;
  }
}

.page-footer__contacts {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-negative: 2;
  flex-shrink: 2;
-webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 50%;
    padding-top: 38px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
width: 100%;
    padding: 0;
    border-top: 1px solid rgba(248, 253, 255, 0.7);
    border-bottom: 1px solid rgba(248, 253, 255, 0.7);
}

.contacts__heading-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 23px;
    padding-right: 13px;
    padding-bottom: 23px;
    padding-left: 15px;
    margin: 0;
    width: 100%;
  }

.contacts__header {
    width: auto;
font-family: "Roboto Condensed", "Arial", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 16px;
  display: block;
  width: 333px;
  margin: 0;
  letter-spacing: 0.78px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  padding-left: 2.4px;
  }

.contacts__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 0;
  padding: 0;
padding-top: 5px;
    padding-right: 30px;
    padding-bottom: 26px;
    padding-left: 15px;
}

.contacts__item {
  list-style: none;
  font-size: 15px;
  font-style: normal;
  line-height: 25px;
  opacity: 0.5;
  color: rgba(255, 255, 255, 0.7);
}

.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  white-space: nowrap;
  border: 0;
  clip-path: inset(100%);
}

.page-footer__wrapper{
background-color:blue;
}

<div class="page-footer__wrapper wrapper">
    <div class="page-footer__base">
      <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>