Acordeão em JavaScript

Agora vamos implementar um acordeão. Ele é semelhante a abas viradas de lado. Além disso, no acordeão, você pode fechar a aba atual se clicar no link ativo.

Aqui está um exemplo:

Estude também a marcação na qual vamos resolver a tarefa:

<div id="parent">
	<div class="tab active">
		<div class="link">
			<a href="#" >aba 1</a>
		</div>
		<div class="text">
			texto da aba 1
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >aba 2</a>
		</div>
		<div class="text">
			texto da aba 2
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >aba 3</a>
		</div>
		<div class="text">
			texto da aba 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;
}

Discussão

Tecnicamente, o código HTML do acordeão é mais conveniente do que o código das abas: nele, os links estão localizados diretamente acima do spoiler que eles abrem e fecham. Além disso, a classe active em nossa marcação é dada ao pai comum do link e do spoiler.

Isso significa que ao clicar em um link, você precisa simplesmente desativar a aba antiga e ativar a nova. Para desativar a aba antiga é necessário encontrar a aba com a classe active e remover essa classe dela.

Para ativar uma nova aba, você precisa, ao clicar em um link, encontrar o pai dessa aba link e dar a ela a classe active. Tecnicamente, essa busca pode ser feita assim: basta encontrar o pai mais próximo do link que tem a classe tab.

Copie os códigos HTML e CSS fornecidos. Implemente o acordeão de acordo com o algoritmo descrito.