Akordeon në JavaScript

Tani le të implementojmë një akordeon. Ai është i ngjashëm me skedat e kthyera anash. Në këtë rast në akordeon mund të mbyllni skedën aktuale, nëse shtypni mbi lidhjen aktive.

Këtu është një mostër:

Studioni gjithashtu markup-un, mbi të cilin do të zgjidhim detyrën:

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

Diskutim

Në aspektin teknik, kodi HTML i akordeonit është më i përshtatshëm se kodi i skedave: në të, lidhjet janë të vendosura drejtpërdrejt mbi spoilerin që ata e hapin dhe mbyllin. Përveç kësaj, klasa active në markup-un tonë i jepet prindit të përbashkët të lidhjes dhe spoilerit.

Kjo do të thotë që kur klikohet në një lidhje, ne thjesht duhet të çaktivizojmë skedën e vjetër dhe të aktivizojmë skedën e re. Për të çaktivizuar skedën e vjetër duhet të gjeni skedën me klasën active dhe të hiqni nga ajo këtë klasë.

Për të aktivizuar një skedë të re, duhet për çdo klik në një lidhje të gjeni skedën-prind të kësaj lidhjeje dhe t'i jepni asaj klasën active. Në aspektin teknik një kërkim i tillë mund të bëhet kështu: thjesht gjeni prindin më të afërt të lidhjes që ka klasën tab.

Kopjoni kodet e dhëna HTML dhe CSS. Implementoni akordeonin sipas algoritmit të përshkruar.