JavaScript-de akkordeon

Indi akkordeony amala aşyralyň. Ol gapdalyna çalnan wkladkalara meňzeýär. Şeýle hem akkordeonda häzirki wkladkany ýapmak bolýar, eger işjeň çykgyda basylan bolsa.

Mysal:

Köpçülige ýüz tutma nokatyny döretmeklik meselesini çözjek web sahypasyny hem öwreniň:

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

Gürrüň

Tehniki taýdan akkordeonyň HTML kody wkladkalaryň kodundan has amatly: onda çykgytlar olary açýan we ýapýan spoileriň gönüden-göni ýokarsynda ýerleşdirilýär. Şeýle hem, bizim web sahypamyzda active klassy çykgydyň we spoileriň umumy ata-enesine berilýär.

Bu şuny aňladýar, çykgyda basylanyňyzda diňe köne wkladkany ýapmak we täze wkladkany açmak gerekmegidir. Köne wkladkany ýapmak üçin active klasly wkladkany tapmak we ondan bu klassy aýyrmak zerur.

Täze wkladkany açmak üçin çykgyda basylda şol çykgydyň ata-enesini tapmak we oňa active klassy bermek gerek. Tehniki taýdan şeýle gözleg edip bolýar: diňe tab klassy bolan çykgydyň iň ýakyn ata-enesini tapmak.

Görkezilen HTML we CSS kodlaryny özüňize göçüriň. Görkezilen algoritma boýunça akkordeony amala aşyryň.