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