Akkordeon in JavaScript

Lassen Sie uns nun ein Akkordeon implementieren. Es ähnelt Tabs, die auf die Seite gedreht wurden. Dabei kann im Akkordeon der aktive Tab geschlossen werden, wenn man auf den aktiven Link klickt.

Hier ist ein Beispiel:

Studieren Sie auch das Markup, auf dessen Grundlage wir die Aufgabe lösen werden:

<div id="parent">
	<div class="tab active">
		<div class="link">
			<a href="#" >Tab 1</a>
		</div>
		<div class="text">
			Text von Tab 1
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >Tab 2</a>
		</div>
		<div class="text">
			Text von Tab 2
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >Tab 3</a>
		</div>
		<div class="text">
			Text von Tab 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

Technisch gesehen ist der HTML-Code des Akkordeons bequemer als der Code der Tabs: Darin sind die Links direkt über dem Spoiler positioniert, den sie öffnen und schließen. Darüber hinaus wird die Klasse active in unserem Markup dem gemeinsamen Elternteil des Links und des Spoilers gegeben.

Das bedeutet, dass beim Klicken auf einen Link einfach der alte Tab deaktiviert und der neue Tab aktiviert werden muss. Um den alten Tab zu deaktivieren, muss der Tab mit der Klasse active gefunden und diese Klasse von ihm entfernt werden.

Um einen neuen Tab zu aktivieren, muss beim Klick auf den Link der übergeordnete Tab dieses Links gefunden und ihm die Klasse active gegeben werden. Technisch gesehen kann eine solche Suche so durchgeführt werden: Einfach den nächstgelegenen Elternteil des Links finden, der die Klasse tab hat.

Kopieren Sie die angegebenen HTML- und CSS-Codes. Implementieren Sie das Akkordeon gemäß dem beschriebenen Algorithmus.