Accordéon en JavaScript

Implémentons maintenant un accordéon. Il est similaire à des onglets retournés sur le côté. De plus, dans un accordéon, on peut fermer l'onglet actuel en cliquant sur le lien actif.

Voici un exemple :

Étudiez également le balisage sur lequel nous résoudrons le problème :

<div id="parent">
	<div class="tab active">
		<div class="link">
			<a href="#" >onglet 1</a>
		</div>
		<div class="text">
			texte de l'onglet 1
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >onglet 2</a>
		</div>
		<div class="text">
			texte de l'onglet 2
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >onglet 3</a>
		</div>
		<div class="text">
			texte de l'onglet 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;
}

Discussion

Techniquement, le code HTML de l'accordéon est plus pratique que le code des onglets : dans celui-ci, les liens sont situés directement au-dessus du spoiler qu'ils ouvrent et ferment. De plus, la classe active dans notre balisage est donnée au parent commun du lien et du spoiler.

Cela signifie que lors d'un clic sur un lien, il faut simplement désactiver l'ancien onglet et activer le nouveau. Pour désactiver l'ancien onglet, il faut trouver l'onglet avec la classe active et lui retirer cette classe.

Pour activer le nouvel onglet, il faut, lors d'un clic sur le lien, trouver l'onglet parent de ce lien et lui donner la classe active. Techniquement, une telle recherche peut être faite ainsi : il suffit de trouver le parent le plus proche du lien ayant la classe tab.

Copiez les codes HTML et CSS fournis. Implémentez l'accordéon selon l'algorithme décrit.