Akordeon na JavaScriptu

Hajde sada da implementiramo akordeon. On je sličan tabovima, ali okrenutim na stranu. Pritom u akordeonu možete zatvoriti trenutni tab ako kliknete na aktivni link.

Evo primera:

Proučite i HTML strukturu na kojoj ćemo rešavati zadatak:

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

Diskusija

Tehnički, HTML kod akordeona je praktičniji od koda za tabove: u njemu su linkovi direktno locirani iznad spoajlera (sadržaja) koji otvaraju i zatvaraju. Pored toga, klasa active u našoj strukturi se daje zajedničkom roditelju linka i spoajlera.

To znači da prilikom klika na link treba jednostavno deaktivirati stari tab i aktivirati novi. Da biste deaktivirali stari tab potrebno je pronaći tab sa klasom active i ukloniti mu tu klasu.

Da biste aktivirali novi tab, potrebno je na klik na link pronaći tab-roditelja tog linka i dodeliti mu klasu active. Tehnički, takvu pretragu možete izvesti ovako: jednostavno pronađite najbližeg roditelja linka koji ima klasu tab.

Kopirajte sebi date HTML i CSS kodove. Implementirajte akordeon prema opisanom algoritmu.