Akordeón na JavaScript

Poďme teraz implementovať akordeón. Je podobný na záložky, otočené na bok. Zároveň v akordeóne je možné zavrieť aktuálnu záložku, ak kliknete na aktívny odkaz.

Tu je ukážka:

Preštudujte si aj HTML a CSS kód, na ktorom budeme riešiť úlohu:

<div id="parent">
	<div class="tab active">
		<div class="link">
			<a href="#" >záložka 1</a>
		</div>
		<div class="text">
			text záložky 1
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >záložka 2</a>
		</div>
		<div class="text">
			text záložky 2
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >záložka 3</a>
		</div>
		<div class="text">
			text záložky 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;
}

Diskusia

Technicky je HTML kód akordeónu pohodlnejší ako kód záložiek: v ňom sú odkazy umiestnené priamo nad skrytým obsahom, ktorý otvárajú a zatvárajú. Okrem toho, trieda active v našom HTML a CSS kóde je daná spoločnému rodičovi odkazu a skrytého obsahu.

To znamená, že pri kliknutí na odkaz stačí deaktivovať starú záložku a aktivovať novú. Na deaktiváciu starej záložky je potrebné nájsť záložku s triedou active a odstrániť z nej túto triedu.

Na aktiváciu novej záložky je potrebné po kliknutí na odkaz nájsť záložku-rodiča tohto odkazu a pridať jej triedu active. Technicky je možné takýto vyhľadávací proces vykonať takto: jednoducho nájsť najbližšieho rodiča odkazu, ktorý má triedu tab.

Skopírujte si uvedené HTML a CSS kódy. Implementujte akordeón podľa opísaného algoritmu.