JavaScript ile Akordeon

Şimdi bir akordeon uygulaması gerçekleştirelim. Akordeon, yan tarafa çevrilmiş sekmelere benzer. Ayrıca akordeonda, aktif sekme üzerindeki bağlantıya tıklandığında mevcut sekme kapatılabilir.

İşte bir örnek:

Görevi çözeceğimiz HTML işaretlemesini de inceleyin:

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

Tartışma

Teknik olarak akordeonun HTML kodu, sekme kodundan daha kullanışlıdır: bağlantılar, açıp kapattıkları spoiler'ın hemen üzerinde bulunur. Ayrıca, işaretlememizdeki active sınıfı, bağlantı ve spoiler'ın ortak ebeveynine verilir.

Bu, bir bağlantıya tıklandığında eski sekmenin devre dışı bırakılması ve yeni sekmenin etkinleştirilmesi gerektiği anlamına gelir. Eski sekmeyi devre dışı bırakmak için, active sınıfına sahip olan sekmeyi bulup bu sınıfı ondan kaldırmak gerekir.

Yeni sekmeyi etkinleştirmek için, bağlantıya tıklandığında bu bağlantının ebeveyn sekmesini bulup ona active sınıfını vermek gerekir. Teknik olarak böyle bir arama şu şekilde yapılabilir: tab sınıfına sahip olan, bağlantının en yakın ebeveynini bulmak.

Verilen HTML ve CSS kodlarını kendinize kopyalayın. Tarif edilen algoritmaya göre akordeonu uygulayın.