JavaScript로 만드는 아코디언

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

다음은 예시입니다:

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

<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>

#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를 가진 링크의 가장 가까운 부모를 찾으면 됩니다.

제공된 HTML 및 CSS 코드를 복사하세요. 설명된 알고리즘에 따라 아코디언을 구현하세요.