Accordion FAQ

Sección de preguntas frecuentes con items expandibles usando el elemento nativo details/summary. Sin JavaScript, sin dependencias.

Dependencias Ninguna — HTML y CSS puro.

Descripción

Un accordion es una lista de preguntas que se abren y se cierran al hacer click, mostrando u ocultando la respuesta. Este módulo lo arma con las etiquetas <details> y <summary> de HTML.

Lo bueno es que no necesitás ni una línea de JavaScript. El navegador ya sabe cómo abrir y cerrar el <details> solo con hacer click, y funciona en todos los navegadores.

Cada pregunta es un <details> separado, así que podés tener varias abiertas al mismo tiempo. Si querés que se cierre una cuando abrís otra, agregá el atributo name con el mismo valor en todos los <details> (funciona en navegadores nuevos, como Chrome 120 en adelante).

El signo “+” que ves al lado de cada pregunta gira y se convierte en una “×” cuando la abrís. Eso se logra con CSS: se dibuja el símbolo con ::after (un truco de CSS para agregar contenido sin escribirlo en el HTML) y se lo rota con transform.

Arriba del todo del CSS hay variables (las que empiezan con --) para cambiar colores, bordes redondeados y espacios. Cambiándolas ahí se actualiza todo el accordion.

Para usarlo, pegá el bloque de HTML donde quieras que aparezca la sección de preguntas, y pegá el CSS en tu archivo de estilos (o dentro de una etiqueta <style> en el <head>). No hace falta nada más.

HTML

<section class="faq">
  <div class="faq-inner">
    <p class="faq-label">FAQ</p>
    <h2 class="faq-title">Preguntas frecuentes</h2>
    <div class="faq-list">

      <details class="faq-item">
        <summary class="faq-question">
          ¿Cómo empiezo a usar el producto?
        </summary>
        <p class="faq-answer">
          Creá una cuenta gratuita, confirmá tu email
          y en menos de 5 minutos ya podés usar todas
          las funcionalidades principales.
        </p>
      </details>

      <details class="faq-item">
        <summary class="faq-question">
          ¿Necesito una tarjeta de crédito para el plan gratuito?
        </summary>
        <p class="faq-answer">
          No. El plan gratuito no requiere tarjeta de crédito.
          Solo ingresá tu email y ya estás adentro.
        </p>
      </details>

      <details class="faq-item">
        <summary class="faq-question">
          ¿Puedo cancelar en cualquier momento?
        </summary>
        <p class="faq-answer">
          Sí. Podés cancelar tu suscripción cuando
          quieras desde la configuración de tu cuenta,
          sin penalizaciones ni períodos de permanencia.
        </p>
      </details>

      <details class="faq-item">
        <summary class="faq-question">
          ¿Tienen soporte en español?
        </summary>
        <p class="faq-answer">
          Sí, todo nuestro equipo de soporte atiende
          en español de lunes a viernes de 9 a 18 hs.
        </p>
      </details>

    </div>
  </div>
</section>

CSS

/*
|----------------------------------------------------------
| Accordion FAQ — Kodeval Pages
| HTML y CSS puro. Usa details/summary nativo.
| Sin dependencias externas.
|----------------------------------------------------------
*/

:root {
  --faq-bg:          #ffffff;
  --faq-border:      #e2e8f0;
  --faq-radius:      14px;
  --faq-q-color:     #0f172a;
  --faq-a-color:     #64748b;
  --faq-accent:      #5865f2;
  --faq-open-bg:     #fafafa;
}

.faq {
  background: #f8fafc;
  padding: 5rem 1.5rem;
}

.faq-inner {
  max-width: 680px;
  margin: 0 auto;
}

.faq-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--faq-accent);
  margin-bottom: 0.75rem;
}

.faq-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--faq-q-color);
  margin-bottom: 2.5rem;
  line-height: 1.15;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.faq-item {
  background: var(--faq-bg);
  border: 1px solid var(--faq-border);
  border-radius: var(--faq-radius);
  overflow: hidden;
  transition: border-color 0.2s;
}

.faq-item[open] {
  border-color: var(--faq-accent);
  background: var(--faq-open-bg);
}

.faq-question {
  padding: 1.2rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--faq-q-color);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  user-select: none;
  transition: background 0.15s;
}

/* Ocultar el marcador nativo en Chrome */
.faq-question::-webkit-details-marker { display: none; }

/* Indicador + que rota a × al abrir */
.faq-question::after {
  content: '+';
  font-size: 1.2rem;
  font-weight: 400;
  color: #94a3b8;
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.2s;
  line-height: 1;
}

details[open] .faq-question::after {
  transform: rotate(45deg);
  color: var(--faq-accent);
}

.faq-item[open] .faq-question {
  border-bottom: 1px solid var(--faq-border);
}

.faq-answer {
  padding: 1.2rem 1.5rem;
  font-size: 0.9rem;
  color: var(--faq-a-color);
  line-height: 1.8;
  margin: 0;
}

@media (max-width: 600px) {
  .faq { padding: 3rem 1rem; }
  .faq-question { font-size: 0.88rem; }
}