JavaScript-də Akkordeon

Gəlin indi akkordeon reallaşdıraq. O, yan tərəfə çevrilmiş vərəqlərə bənzəyir. Eyni zamanda akkordeonda cari vərəqi bağlamaq olar, əgər aktiv link üzərində klikləsəniz.

Budur nümunə:

Həmçinin, problemi həll edəcəyimiz quruluşu da öyrənin:

<div id="parent">
	<div class="tab active">
		<div class="link">
			<a href="#" >vərəq 1</a>
		</div>
		<div class="text">
			vərəq 1-in mətni
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >vərəq 2</a>
		</div>
		<div class="text">
			vərəq 2-in mətni
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >vərəq 3</a>
		</div>
		<div class="text">
			vərəq 3-in mətni
		</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;
}

Müzakirə

Texniki cəhətdən akkordeonun HTML kodu, vərəqlərin kodundan daha əlverişlidir: onun linkləri birbaşa açdıqları və bağladıqları spoylerin üzərində yerləşir. Bundan əlavə, bizim quruluşumuzda active sinifi linkin və spoylerin ümumi valideyninə verilir.

Bu o deməkdir ki, link üzərində kliklədikdə sadəcə köhnə vərəqi deaktiv etmək və yeni vərəqi aktiv etmək lazımdır. Köhnə vərəqi deaktiv etmək üçün active sinifi olan vərəqi tapmaq və ondan bu sinifi silmək lazımdır.

Yeni vərəqi aktiv etmək üçün link üzərində kliklədikdə bu linkin valideyn vərəqini tapmaq və ona active sinifi vermək lazımdır. Texniki cəhətdən belə axtarışı belə etmək olar: sadəcə linkin tab sinifinə malik ən yaxın valideynini tapmaq.

Verilmiş HTML və CSS kodlarını özünüzə kopyalayın. Təsvir edilən alqoritmə uyğun olaraq akkordeonu reallaşdırın.