Accordion på JavaScript

La oss nå implementere en accordion. Den ligner på faner som er vendt på siden. I tillegg kan man lukke den aktive fanen i en accordion ved å klikke på den aktive lenken.

Her er et eksempel:

Studer også HTML-strukturen som vi skal løse oppgaven på:

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

Diskusjon

Teknisk sett er HTML-koden for en accordion mer praktisk enn koden for faner: i den er lenkene plassert direkte over spoileren som de åpner og lukker. I tillegg gis klassen active i vår HTML-struktur til den felles forelderen til lenken og spoileren.

Dette betyr at når man klikker på en lenke, trenger man bare å deaktivere den gamle fanen og aktivere den nye. For å deaktivere den gamle fanen må man finne fanen med klassen active og fjerne denne klassen fra den.

For å aktivere en ny fane må man ved klikk på lenken finne forelder-fanen til denne lenken og gi den klassen active. Teknisk sett kan en slik søk gjøres slik: bare finn nærmeste forelder til lenken som har klassen tab.

Kopier den medfølgende HTML- og CSS-koden. Implementer accordionen i henhold til den beskrevede algoritmen.