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