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 кодтарын өзіңізге көшіріңіз. Сипатталған алгоритм бойынша аккордеонды жүзеге асырыңыз.