Akkordeon i JavaScript

Lad os nu implementere en akkordeon. Den ligner faner, der er vendt på siden. Samtidig kan man i en akkordeon lukke den aktive fane, hvis man klikker på det aktive link.

Her er et eksempel:

Studer også layoutet, som vi vil løse opgaven 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;
}

Diskussion

Teknisk set er HTML-koden for en akkordeon mere bekvem end koden for faner: i den er linkene placeret direkte over spoileren, som de åbner og lukker. Derudover gives klassen active i vores layout til den fælles forælder for linket og spoileren.

Det betyder, at når der klikkes på et link, skal man blot deaktivere den gamle fane og aktivere den nye. For at deaktivere den gamle fane skal man finde fanen med klassen active og fjerne denne klasse fra den.

For at aktivere den nye fane skal man ved klik på linket finde forælderen til dette link og give den klassen active. Teknisk set kan en sådan søgning gøres sådan: blot find den nærmeste forælder til linket, som har klassen tab.

Kopier den medfølgende HTML- og CSS-koder til dig selv. Implementer akkordeonen i henhold til den beskrevne algoritme.