JavaScript-akordio

Nyt toteutetaan akordio. Se on kuin välilehdet käännettynä sivulle. Akordiossa nykyisen välilehden voi sulkea napsauttamalla aktiivista linkkiä.

Tässä on malli:

Tutustu myös HTML-rakenteeseen, jolla ratkaisemme tehtävän:

<div id="parent">
	<div class="tab active">
		<div class="link">
			<a href="#" >välilehti 1</a>
		</div>
		<div class="text">
			välilehden 1 teksti
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >välilehti 2</a>
		</div>
		<div class="text">
			välilehden 2 teksti
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >välilehti 3</a>
		</div>
		<div class="text">
			välilehden 3 teksti
		</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;
}

Keskustelu

Teknisesti HTML-koodi akordiossa on kätevämpi kuin välilehtien koodi: siinä linkit sijaitsevat suoraan avattavan ja suljettavan spoilerin yläpuolella. Lisäksi luokka active annetaan HTML-rakenteessamme linkin ja spoilerin yhteiselle vanhemmalle.

Tämä tarkoittaa, että linkkiä napsautettaessa tarvitsee vain deaktivoida vanha välilehti ja aktivoida uusi. Vanhan välilehden deaktivoimiseksi tarvitsee etsiä välilehti, jolla on luokka active, ja poistaa siitä tämä luokka.

Uuden välilehden aktivointia varten tarvitsee napsautuksen yhteydessä etsiä linkin vanhempi-välilehti ja antaa sille luokka active. Teknisesti tällainen haku voidaan tehdä näin: yksinkertaisesti etsiä linkin lähin vanhempi, jolla on luokka tab.

Kopioi annetut HTML- ja CSS-koodit. Toteuta akordio kuvatun algoritmin mukaisesti.