Acordeón en JavaScript

Ahora implementemos un acordeón. Es similar a las pestañas, pero giradas de lado. Además, en un acordeón puedes cerrar la pestaña actual si haces clic en el enlace activo.

Aquí hay un ejemplo:

Estudia también el marcado en el que resolveremos la tarea:

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

Discusión

Técnicamente, el código HTML del acordeón es más conveniente que el código de las pestañas: en él, los enlaces se ubican directamente sobre el spoiler que abren y cierran. Además, la clase active en nuestro marcado se le asigna al padre común del enlace y el spoiler.

Esto significa que al hacer clic en un enlace simplemente hay que desactivar la pestaña anterior y activar la nueva. Para desactivar la pestaña anterior es necesario encontrar la pestaña con la clase active y eliminar de ella esta clase.

Para activar la nueva pestaña, es necesario al hacer clic en el enlace encontrar la pestaña padre de este enlace y darle la clase active. Técnicamente, dicha búsqueda se puede hacer así: simplemente encontrar el padre más cercano del enlace que tenga la clase tab.

Copia los códigos HTML y CSS proporcionados. Implementa el acordeón de acuerdo con el algoritmo descrito.