Как открывать только одну вкладку аккордеона?

Question

hooli-gun @hooli-gun

Как открывать только одну вкладку аккордеона?

<div class="accordion">
  <div class="accordion-item" data-accordion-item>
    <button class="accordion-button" data-accordion-button></button>
    <h4 class="accordion-header">Where is Lanp located?<span class="accordion-icon" data-accordion-button-icon></span></h4>
    <div class="accordion-content" data-accordion-content>
      <p>Our company is officially registered in the United Kingdom. Our main office is located in Dnipro, Ukraine.</p>
      <p>We provide services worldwide and have completed projects for clients from over 10 countries, such as USA, Canada, England, Lithuania, Switzerland, Germany, Italy, etc.</p>
      <p>Rest assured, communication experience and project management skills are capable of many things, including time zones and international restrictions. We stay in touch constantly.</p>
    </div>
  </div>
  <div class="accordion-item" data-accordion-item>
    <button class="accordion-button" data-accordion-button></button>
    <h4 class="accordion-header">What is our collaboration plan?<span class="accordion-icon" data-accordion-button-icon></span></h4>
    <div class="accordion-content" data-accordion-content>
      <p>We offer a wide range of cooperation models: Hourly rate, Time and material, Extended team, Product creation, Partnership, Fixed price.</p>
      <p>The cooperation model is selected individually, based on the type of the project, its size, and specification. Our approach is aimed at achieving the best possible result. At the same time, coherence, service quality and increased resource efficiency are also integral.</p>
    </div>
  </div>
</div>

.accordion {
  background: #ccc;
}
.accordion-item {
  border-top: 1px solid #302c4d;
  border-bottom: 1px solid #302c4d;
  position: relative;
}
.accordion-item + .accordion-item {
  border-top: none;
}
.accordion-button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  cursor: pointer;
  border: none;
  padding: 0;
  z-index: 1;
}
.accordion-button:focus {
  outline: none;
}
.accordion-button:focus-visible {
  outline: 1px solid #fcba03;
}
.accordion-header {
  padding: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}
.accordion-icon {
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}
.accordion-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 15px;
  background-color: #fff;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.accordion-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 2px;
  background-color: #fff;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.accordion-icon[data-accordion-button-icon="open"] {
  transform: rotate(-90deg);
}
.accordion-icon[data-accordion-button-icon="open"]::after {
  opacity: 0;
}
.accordion-content {
  font-weight: 300;
  height: 0;
  transition: height 0.3s ease;
  padding-left: 25px;
  padding-right: 25px;
  overflow: hidden;
  line-height: 1.8;
  font-size: 14px;
}
.accordion-content p {
  margin-top: 0;
  margin-bottom: 25px;
}

const accordionItems = document.querySelectorAll('[data-accordion-item]');

accordionItems.forEach(item => {
  const button = item.querySelector('[data-accordion-button]');
  const icon = item.querySemlector('[data-accordion-button-icon]');
  const content = item.querySelector('[data-accordion-content]');
  
  window.addEventListener('resize', () => {
    if (content.getAttribute('data-accordion-content') === 'open') {
      content.style.height = 'auto';
      
      const contentHeight = content.scrollHeight;
      content.style.height = `${contentHeight}px`;
    };
  });
  
  button.addEventListener('click', () => {
    if (content.getAttribute('data-accordion-content') !== 'open') {
      const contentHeight = content.scrollHeight;
      
      icon.setAttribute('data-accordion-button-icon', 'open');
      content.setAttribute('data-accordion-content', 'open');
      content.style.height = `${contentHeight}px`;
    } else {
      icon.setAttribute('data-accordion-button-icon', 'closed');
      content.setAttribute('data-accordion-content', 'closed');
      content.style.height = '0';
    };
  });
});