Акардэон на 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 коды. Рэалізуйце акардэон згодна апісанаму алгарытму.