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:

html<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>

css#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.