Ακορντεόν σε JavaScript

Ας υλοποιήσουμε τώρα ένα ακορντεόν. Μοιάζει με καρτέλες που είναι αναποδογυρισμένες πλαγίως. Σε αυτή την περίπτωση στο ακορντεόν μπορείτε να κλείσετε την τρέχουσα καρτέλα, αν πατήσετε στο ενεργό σύνδεσμο.

Ακολουθεί ένα δείγμα:

Μελετήστε επίσης τη σήμανση, πάνω στην οποία θα λύσουμε το πρόβλημα:

<div id="parent">
	<div class="tab active">
		<div class="link">
			<a href="#" >καρτέλα 1</a>
		</div>
		<div class="text">
			κείμενο καρτέλας 1
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >καρτέλα 2</a>
		</div>
		<div class="text">
			κείμενο καρτέλας 2
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >καρτέλα 3</a>
		</div>
		<div class="text">
			κείμενο καρτέλας 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;
}

Συζήτηση

Τεχνικά, ο κώδικας HTML του ακορντεόν είναι πιο βολικός από τον κώδικα των καρτελών: σε αυτόν, οι σύνδεσμοι βρίσκονται απευθείας πάνω από το spoiler που ανοίγουν και κλείνουν. Επιπλέον, η κλάση active στη σήμανσή μας δίνεται στον κοινό γονέα του συνδέσμου και του spoiler.

Αυτό σημαίνει ότι όταν πατιέται ένας σύνδεσμος, απλά πρέπει να απενεργοποιήσετε την παλιά καρτέλα και να ενεργοποιήσετε τη νέα. Για να απενεργοποιήσετε την παλιά καρτέλα πρέπει να βρείτε την καρτέλα με την κλάση active και να αφαιρέσετε από αυτήν αυτή την κλάση.

Για να ενεργοποιήσετε μια νέα καρτέλα, πρέπει με βάση το κλικ σε ένα σύνδεσμο να βρείτε τον γονέα αυτής της καρτέλας και να της δώσετε την κλάση active. Τεχνικά, μια τέτοια αναζήτηση μπορεί να γίνει ως εξής: απλά βρείτε τον πλησιέστερο γονέα του συνδέσμου που έχει την κλάση tab.

Αντιγράψτε στον εαυτό σας τους παρεχόμενους κώδικες HTML και CSS. Υλοποιήστε το ακορντεόν σύμφωνα με τον περιγραφόμενο αλγόριθμο.