Акордеон на JavaScript

Нека сега реализираме акордеон. Той прилича на раздели, обърнати настрани. При това в акордеона може да затворите текущия раздел, ако кликнете върху активната връзка.

Ето пример:

Проучете и HTML/CSS кода, върху който ще решаваме задачата:

<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 в нашия HTML/CSS код се дава на общия родител на връзката и съдържанието.

Това означава, че при кликване на връзка трябва просто да деактивирате стария раздел и да активирате новия. За да деактивирате стария раздел трябва да намерите раздела с клас active и да премахнете от него този клас.

За да активирате нов раздел трябва при клик на връзка да намерите родителския раздел на тази връзка и да му дадете клас active. Технически такова търсене може да се направи така: просто да се намери най-близкият родител на връзката, който има клас tab.

Копирайте си дадените HTML и CSS кодове. Реализирайте акордеон според описания алгоритъм.