Acordeon în JavaScript

Să implementăm acum un acordeon. Acesta este asemănător cu filele, răsturnate pe o parte. În același timp, în acordeon poți închide fila curentă, dacă apeși pe legătura activă.

Iată un exemplu:

Studiați de asemenea și markup-ul, pe care vom rezolva problema:

<div id="parent">
	<div class="tab active">
		<div class="link">
			<a href="#" >fila 1</a>
		</div>
		<div class="text">
			textul filei 1
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >fila 2</a>
		</div>
		<div class="text">
			textul filei 2
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >fila 3</a>
		</div>
		<div class="text">
			textul filei 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;
}

Discuție

Din punct de vedere tehnic, codul HTML al acordeonului este mai convenabil decât codul filelor: în el, legăturile sunt situate direct deasupra spoilerului pe care îl deschid și închid. În plus, clasa active în markup-ul nostru este dată părintelui comun al legăturii și spoilerului.

Aceasta înseamnă că la click pe legătură trebuie doar să dezactivăm vechea filă și să activăm cea nouă. Pentru a dezactiva vechea filă trebuie să găsim fila cu clasa active și să îi eliminăm această clasă.

Pentru a activa noua filă trebuie la click pe legătură să găsim părintele acestei legături și să îi dăm clasa active. Din punct de vedere tehnic, o astfel de căutare se poate face astfel: pur și simplu găsiți părintele cel mai apropiat al legăturii, care are clasa tab.

Copiați codurile HTML și CSS date. Implementați acordeonul conform algoritmului descris.