Akordeon w JavaScript

Zaimplementujmy teraz akordeon. Jest on podobny do zakładek odwróconych na bok. Jednakże w akordeonie można zamknąć bieżącą zakładkę, klikając na aktywny link.

Oto przykład:

Przeanalizuj również układ, na którym będziemy rozwiązywać zadanie:

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

Dyskusja

Technicznie kod HTML akordeonu jest wygodniejszy niż kod zakładek: w nim linki znajdują się bezpośrednio nad spoilerm, który otwierają i zamykają. Ponadto, klasa active w naszym układzie nadawana jest wspólnemu rodzicowi linku i spoilera.

Oznacza to, że po kliknięciu na link trzeba po prostu deaktywować starą zakładkę i aktywować nową. Aby deaktywować starą zakładkę trzeba znaleźć zakładkę z klasą active i usunąć z niej tę klasę.

Aby aktywować nową zakładkę trzeba po kliknięciu na link znaleźć zakładkę-rodzica tego linku i nadać jej klasę active. Technicznie takie wyszukiwanie można zrobić tak: po prostu znaleźć najbliższego rodzica linku, posiadającego klasę tab.

Skopiuj sobie podane kody HTML i CSS. Zaimplementuj akordeon zgodnie z opisanym algorytmem.