JavaScript da Akkordeon

Keling, endi akkordeonni amalga oshiramiz. U yon tomonga aylantirilgan tablarga o'xshaydi. Bunday holda akkordeonda joriy tabni yopish mumkin, agar faol havolani bosganiz.

Mana namuna:

Shuningdek, biz masalani yechadigan verstkani o'rganing:

<div id="parent">
	<div class="tab active">
		<div class="link">
			<a href="#" >tab 1</a>
		</div>
		<div class="text">
			tab 1 matni
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >tab 2</a>
		</div>
		<div class="text">
			tab 2 matni
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >tab 3</a>
		</div>
		<div class="text">
			tab 3 matni
		</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;
}

Muhokama

Texnik jihatdan akkordeonning HTML kodi tablarning kodiga qaraganda qulayroq: unda havolalar to'g'ridan-to'g'ri ochiladigan va yopiladigan spoyler ustida joylashgan. Bundan tashqari, active klassi bizning verstkamizda havola va spoylerning umumiy ota-onasiga beriladi.

Bu shuni anglatadiki, havolani bosganida shunchaki eski tabni faolsizlantirish va yangisini faollashtirish kerak. Eski tabni faolsizlantirish uchun active klassiga ega tabni topish va undan bu klassni olib tashlash kerak.

Yangi tabni faollashtirish uchun havolaga bosilganda shu havolaning ota-ona tabini topish va unga active klassini berish kerak. Texnik jihatdan bunday qidiruvni shunday amalga oshirish mumkin: shunchaki tab klassiga ega bo'lgan havolaning eng yaqin ota-onasini toping.

Keltirilgan HTML va CSS kodlarni o'zingizga nusxalang. Akkordeonni tavsiflangan algoritm asosida amalga oshiring.