JavaScript로 만드는 아코디언

이제 아코디언을 구현해 보겠습니다. 이는 옆으로 뒤집힌 탭과 비슷합니다. 또한 아코디언에서는 활성화된 링크를 클릭하면 현재 탭을 닫을 수 있습니다.

다음은 예시입니다:

우리가 문제를 해결할 마크업도 살펴보세요:

html<div id="parent">
  <div class="tab active">
    <div class="link">
      <a href="#" >탭 1</a>
    </div>
    <div class="text">
      탭 1의 텍스트
    </div>
  </div>
  <div class="tab">
    <div class="link">
      <a href="#" >탭 2</a>
    </div>
    <div class="text">
      탭 2의 텍스트
    </div>
  </div>
  <div class="tab">
    <div class="link">
      <a href="#" >탭 3</a>
    </div>
    <div class="text">
      탭 3의 텍스트
    </div>
  </div>
</div>

css#parent {
  margin: 0 auto;
  width: 400px;
}
.tab {
  margin-bottom: 10px;
}

.tab .link a {
  display: block;
  padding: 10px;
  color: black;
  text-decoration: none;
  text-align: center;
  background: #f8f8f8;
  border: 1px solid gray;
}
.tab .link:hover a {
  background: #f2f2f2;
}

.tab:not(.active) .text {
  display: none;
}
.tab .text {
  border: 1px dashed gray;
  border-top: none;
  
  padding: 10px;
  height: 300px;
}

논의

기술적으로 아코디언의 HTML 코드는 탭의 코드보다 편리합니다: 링크가 열고 닫는 스포일러 바로 위에 위치합니다. 게다가, 우리의 마크업에서 클래스 active는 링크와 스포일러의 공통 부모에게 주어집니다.

이는 링크를 클릭할 때 단순히 이전 탭을 비활성화하고 새 탭을 활성화하기만 하면 된다는 뜻입니다. 이전 탭을 비활성화하려면 클래스 active가 있는 탭을 찾아서 그 클래스를 제거해야 합니다.

새 탭을 활성화하려면 링크 클릭 시 해당 링크의 부모 탭을 찾아서 클래스 active를 부여해야 합니다. 기술적으로 이러한 탐색은 다음과 같이 수행할 수 있습니다: 클래스 tab를 가진 링크의 가장 가까운 부모를 찾으면 됩니다.