Accordion in JavaScript

Laten we nu een accordion implementeren. Het lijkt op tabbladen die op hun zij zijn gedraaid. In een accordion kan het huidige tabblad worden gesloten door op de actieve link te klikken.

Hier is een voorbeeld:

Bestudeer ook de opmaak waarop we de taak gaan oplossen:

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

Discussie

Technisch gezien is de HTML-code van een accordion handiger dan de code van tabbladen: daarin zijn de links direct boven de spoiler geplaatst die ze openen en sluiten. Bovendien wordt de klasse active in onze opmaak gegeven aan de gemeenschappelijke ouder van de link en de spoiler.

Dit betekent dat bij het klikken op een link gewoon het oude tabblad gedeactiveerd en het nieuwe tabblad geactiveerd moet worden. Om het oude tabblad te deactiveren moet je het tabblad met de klasse active vinden en deze klasse ervan verwijderen.

Om een nieuw tabblad te activeren moet je, bij het klikken op een link, het bovenliggende tabblad van deze link vinden en de klasse active geven. Technisch gezien kan zo'n zoekopdracht als volgt worden gedaan: zoek gewoon de dichtstbijzijnde ouder van de link die de klasse tab heeft.

Kopieer de gegeven HTML- en CSS-codes. Implementeer de accordion volgens het beschreven algoritme.