Аккордеон на 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 кодове. Имплементирајте акордеон по описаном алгоритму.