Accordion i JavaScript

Låt oss nu implementera en accordion. Den liknar flikar som är vända på sidan. Dessutom i en accordion kan man stänga den aktuella fliken, om man klickar på den aktiva länken.

Här är ett exempel:

Studera även den HTML-struktur som vi kommer att lösa uppgiften på:

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

Diskussion

Tekniskt sett är HTML-koden för en accordion bekvämare än koden för flikar: i den är länkarna placerade direkt ovanför spoilertexten som de öppnar och stänger. Dessutom ges klassen active i vår HTML-struktur till den gemensamma föräldern till länken och spoilertexten.

Det betyder att när man klickar på en länk behöver man bara inaktivera den gamla fliken och aktivera den nya. För att inaktivera den gamla fliken behöver man hitta fliken med klassen active och ta bort klassen från den.

För att aktivera en ny flik behöver man, vid klick på en länk, hitta länkens förälderfliken och ge den klassen active. Tekniskt sett kan en sådan sökning göras så här: helt enkelt hitta länkens närmaste förälder som har klassen tab.

Kopiera den medföljande HTML- och CSS-koden till dig. Implementera accordion enligt den beskrivna algoritmen.