Accordion in JavaScript

Ora implementiamo un accordion. È simile a delle schede ribaltate su un lato. Inoltre, nell'accordion è possibile chiudere la scheda corrente, se si clicca sul link attivo.

Ecco un esempio:

Studiate anche il markup su cui risolveremo il problema:

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

Discussione

Tecnicamente il codice HTML dell'accordion è più conveniente del codice delle schede: in esso i link sono posizionati direttamente sopra lo spoiler che aprono e chiudono. Inoltre, la classe active nel nostro markup viene data al genitore comune del link e dello spoiler.

Ciò significa che quando si clicca su un link basta disattivare la vecchia scheda e attivare quella nuova. Per disattivare la vecchia scheda bisogna trovare la scheda con la classe active e rimuovere da essa questa classe.

Per attivare una nuova scheda è necessario, in base al click sul link, trovare il genitore di questa scheda link e darle la classe active. Tecnicamente una tale ricerca può essere fatta così: basta trovare il genitore più vicino del link che ha la classe tab.

Copiate i codici HTML e CSS forniti. Implementate l'accordion secondo l'algoritmo descritto.