JavaScripti akordion

Rakendame nüüd akordioni. See sarnaneb külili pööratud vahekaartidega. Samas saab akordionis praeguse vahekaardi sulgeda, kui vajutada aktiivsele lingile.

Siin on näidis:

Uurige ka veebilehe koodi, millel me ülesannet lahendame:

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

Arutelu

Tehniliselt on akordioni HTML kood mugavam kui vahekaartide kood: selles asuvad lingid otse nende avavate ja sulgevate spoilrite kohal. Lisaks antakse meie veebilehe koodis klass active lingi ja spoileri ühisele ülemkaustale.

See tähendab, et lingile vajutamisel tuleb lihtsalt vana vahekaart deaktiveerida ja uus aktiveerida. Vana vahekaardi deaktiveerimiseks tuleb leida klassiga active vahekaart ja eemaldada sellest see klass.

Uue vahekaardi aktiveerimiseks tuleb lingile klõpsu järgi leida selle lingi ülemkaust ja anda sellele klass active. Tehniliselt saab sellist otsingut teha nii: lihtsalt leida lingi lähima ülemkausta, millel on klass tab.

Kopeerige endale toodud HTML ja CSS koodid. Rakendage akordion vastavalt kirjeldatud algoritmile.