JavaScript Akkordeon

Valósítsunk most meg egy akkordeont. Hasonlít az oldalra fordított lapokhoz. Ugyanakkor az akkordeonban bezárhatjuk az aktuális lapot, ha az aktív linkre kattintunk.

Itt egy minta:

Tanulmányozd azt a HTML és CSS kódot is, amin a feladatot megoldjuk:

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

Megbeszélés

Technikailag az akkordeon HTML kódja kényelmesebb, mint a lapoké: a linkek közvetlenül azon spoiler felett helyezkednek el, amelyet megnyitnak és bezárnak. Ezen kívül a active osztály a verzióban a link és a spoiler közös szülőjének adható.

Ez azt jelenti, hogy egy linkre kattintáskor egyszerűen csak deaktiválni kell a régi lapot és aktiválni az újat. A régi lap deaktiválásához keresni kell az active osztállyal rendelkező lapot és eltávolítani belőle ezt az osztályt.

Az új lap aktiválásához a linkre kattintva meg kell találni a link szülő lapját és adni neki az active osztályt. Technikailag egy ilyen keresést így lehet megtenni: egyszerűen meg kell találni a link legközelebbi, tab osztállyal rendelkező szülőjét.

Másold le a megadott HTML és CSS kódokat. Valósítsd meg az akkordeont a leírt algoritmus szerint.