html - 자바 스크립트 아코디언 - 하나를 선택하면 다른 섹션 축소

클릭 한 섹션을 열기 전에 먼저 모든 섹션을 접을 수 있습니다.

토글 기능의 첫 번째에이 루프를 추가하십시오 :

var x = document.getElementsByClassName('active');
var i;
for (i = 0; i < x.length; i++) {
  if( x[i]==this ){ break; }
  x[i].nextElementSibling.removeAttribute('style');
  x[i].nextElementSibling.classList.toggle('active');
  x[i].classList.toggle('active');
}

업데이트 된 CodePEN

div.accordion .accordion-header {
  cursor: pointer;
}
div.accordion .accordion-content {
  max-height: 0px;
  overflow: hidden;
  -webkit-transition: max-height 400ms;
  transition: max-height 400ms;
}
div.accordion .accordion-content.active {
  overflow: auto;
}

<div class="accordion">
  <h4 class="accordion-header">Accordion 1</h4>
  <div class="accordion-content">
    <p>Cras malesuada ultrices augue molestie risus.</p>
  </div>
  <h4 class="accordion-header">Accordion 2</h4>
  <div class="accordion-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae at placeat nesciunt nostrum accusamus debitis fuga similique quisquam, rerum temporibus, quod asperiores nulla, eveniet libero earum eaque harum inventore minima ipsum saepe omnis. Officia, est, maiores. Reprehenderit odio perspiciatis voluptates commodi ex at praesentium laborum deleniti libero, architecto sit optio repellat est molestiae beatae, magnam qui voluptatibus. Ducimus mollitia dignissimos minus sapiente quidem, animi adipisci laboriosam aliquam asperiores facere. Repellat recusandae doloribus incidunt voluptatibus quibusdam rem delectus inventore nisi, laudantium. Doloribus eum vero, consequuntur nisi enim quam non odio dignissimos praesentium nostrum magnam consequatur totam reprehenderit quaerat. Saepe, blanditiis fugit?</p>
  </div>
  <h4 class="accordion-header">Accordion 3</h4>
  <div class="accordion-content">
    <p>Vivamus facilisisnibh scelerisque laoreet.</p>
  </div>
</div>
<div class="accordion">
  <h4 class="accordion-header">Accordion 1</h4>
  <div class="accordion-content">
    <p>Cras malesuada ultrices augue molestie risus.</p>
  </div>
  <h4 class="accordion-header">Accordion 2</h4>
  <div class="accordion-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae at placeat nesciunt nostrum accusamus debitis fuga similique quisquam, rerum temporibus, quod asperiores nulla, eveniet libero earum eaque harum inventore minima ipsum saepe omnis. Officia, est, maiores. Reprehenderit odio perspiciatis voluptates commodi ex at praesentium laborum deleniti libero, architecto sit optio repellat est molestiae beatae, magnam qui voluptatibus. Ducimus mollitia dignissimos minus sapiente quidem, animi adipisci laboriosam aliquam asperiores facere. Repellat recusandae doloribus incidunt voluptatibus quibusdam rem delectus inventore nisi, laudantium. Doloribus eum vero, consequuntur nisi enim quam non odio dignissimos praesentium nostrum magnam consequatur totam reprehenderit quaerat. Saepe, blanditiis fugit?</p>
  </div>
  <h4 class="accordion-header">Accordion 3</h4>
  <div class="accordion-content">
    <p>Vivamus facilisisnibh scelerisque laoreet.</p>
  </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
  function toggle() {
    var x = document.getElementsByClassName('active');
    var i;
    for (i = 0; i < x.length; i++) {
      if( x[i]==this ){ break; }
      x[i].nextElementSibling.removeAttribute('style');
      x[i].nextElementSibling.classList.toggle('active');
      x[i].classList.toggle('active');
    }
    
    if (this.nextElementSibling.classList.contains('active')) {
      
      this.nextElementSibling.removeAttribute('style');
      
    } else {
      var elementHeight = this.nextElementSibling.scrollHeight;
      this.nextElementSibling.style.maxHeight = elementHeight + 'px';
    }
    // Toggle `active` class
    this.nextElementSibling.classList.toggle('active');
    this.classList.toggle('active');
  }
  var accordion = document.querySelectorAll('div.accordion .accordion-header');
  for (var i = 0, len = accordion.length; i < len; i++) {
    accordion[i].addEventListener('click', toggle);
  }
});
</script>