Как реализовать функцию, чтобы при клике на один элемент аккордеона, все остальные закрывались?

Для реализации такой функции необходимо использовать JavaScript и добавить соответствующие обработчики событий.

Пример реализации:

HTML:
```html
<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">Заголовок 1</div>
    <div class="accordion-content">Содержимое 1</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Заголовок 2</div>
    <div class="accordion-content">Содержимое 2</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Заголовок 3</div>
    <div class="accordion-content">Содержимое 3</div>
  </div>
</div>
```

CSS:
```css
.accordion .accordion-header {
  cursor: pointer;
}

.accordion .accordion-content {
  display: none;
}
```

JavaScript:
```javascript
document.addEventListener('DOMContentLoaded', function() {
  const accordionHeaders = document.querySelectorAll('.accordion .accordion-header');

  accordionHeaders.forEach(function(header) {
    header.addEventListener('click', function() {
      const accordionItem = this.parentNode;
      
      // Закрываем все аккордеоны
      const accordionItems = document.querySelectorAll('.accordion .accordion-item');
      accordionItems.forEach(function(item) {
        if (item !== accordionItem) {
          item.classList.remove('active');
          item.querySelector('.accordion-content').style.display = 'none';
        }
      });
      
      // Открываем/закрываем текущий аккордеон
      accordionItem.classList.toggle('active');
      const content = accordionItem.querySelector('.accordion-content');
      if (content.style.display === 'block') {
        content.style.display = 'none';
      } else {
        content.style.display = 'block';
      }
    });
  });
});
```

В данном примере при клике на заголовок аккордеона происходит открытие или закрытие соответствующего содержимого. При этом все остальные аккордеоны закрываются.

document.addEventListener('DOMContentLoaded', () => {
  const accordions = document.querySelectorAll('.accordion');

  accordions.forEach(el => {
    el.addEventListener('click', (e) => {
      const self = e.currentTarget;
      const control = self.querySelector('.accordion__control');
      const content = self.querySelector('.accordion__content');

      accordions.forEach(el => {
       if (self !== el) {
         el.classList.remove('open');
       }
      })
      self.classList.toggle('open');

      if (self.classList.contains('open')) {
        control.setAttribute('aria-expanded', true);
        content.setAttribute('aria-hidden', false);
        content.style.maxHeight = content.scrollHeight + 'px';
      } else {
        control.setAttribute('aria-expanded', false);
        content.setAttribute('aria-hidden', true);
        content.style.maxHeight = null;
      }
    })
  })
});