Accordions y tabs sin JS

Accordions y tabs solo con CSS

Puedes crear componentes interactivos como accordions y tabs sin JavaScript, usando pseudo-clases modernas como :checked, :target, :has, :focus-within y combinaciones avanzadas.

Accordion accesible con :checked

<div class="acordeon">
  <input type="checkbox" id="acordeon1" hidden>
  <label for="acordeon1">Sección 1</label>
  <div class="contenido">
    Contenido de la sección 1
  </div>
</div>

.contenido { display: none; }
#acordeon1:checked + label + .contenido {
  display: block;
  animation: fadeIn 0.3s;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

Variante: solo un panel abierto (tipo radio)

<div class="acordeon">
  <input type="radio" name="acordeon" id="panel1" hidden>
  <label for="panel1">Panel 1</label>
  <div class="contenido">Contenido 1</div>
  <input type="radio" name="acordeon" id="panel2" hidden>
  <label for="panel2">Panel 2</label>
  <div class="contenido">Contenido 2</div>
</div>

.contenido { display: none; }
#panel1:checked ~ label[for="panel1"] + .contenido {
  display: block;
}
#panel2:checked ~ label[for="panel2"] + .contenido {
  display: block;
}

Tabs solo con CSS usando :target

<nav>
  <a href="#tab1">Tab 1</a>
  <a href="#tab2">Tab 2</a>
</nav>
<div id="tab1" class="tab-content">Contenido 1</div>
<div id="tab2" class="tab-content">Contenido 2</div>

.tab-content { display: none; }
:target.tab-content { display: block; }

Tabs accesibles con :focus-within y :has

Puedes mejorar la accesibilidad y la experiencia de usuario combinando :focus-within y :has para mostrar el contenido cuando el usuario navega con teclado o cuando un tab está activo:

.tabs:has(a:focus) .tab-content {
  outline: 2px solid var(--color-primary);
}

Consideraciones de accesibilidad

• Usa roles y atributos ARIA si el componente es complejo.
• Asegúrate de que los controles sean navegables con teclado.
• Añade animaciones suaves para mejorar la experiencia.

Estos patrones muestran el poder de las pseudo-clases modernas para crear UI avanzada sin JavaScript. Experimenta combinando :checked, :target, :has, :focus-within y :not para lograr componentes ricos y accesibles.