Cómo Añadir un Desplegable de FAQs Tipo Acordeón a Carrd.co (Código Gratis)

Carrd no tiene un elemento acordeón integrado. Si quieres un desplegable de FAQ tipo acordeón en tu sitio, incrustas unas líneas de código. El plugin usado en esta guía es gratis. El único coste es Carrd Pro Standard a 19 $/año, el plan más bajo que incluye el elemento Embed. El setup lleva unos 5 minutos.

Una nota de housekeeping: carrd.co ahora redirige a carrd.com. Los enlaces viejos siguen funcionando, pero los docs y el login viven en carrd.com desde ahora. Si aún estás decidiendo cuánto debería costar todo el sitio, el patrón de acordeón FAQ de esta guía es un clásico de cómo construir una web de una página con presupuesto.

Más tutoriales de Carrd:

• Añadir un sticky header a Carrd
• Añadir aviso de cookies a Carrd
• Cómo añadir una tabla de precios a Carrd.co
• Reseña de Carrd.co
• Slider de testimonios en Carrd
• Botón volver arriba en Carrd
• Enlaces de ancla con scroll suave en Carrd
• Toggle de modo oscuro en Carrd

La lista completa de plugins, temas y tutoriales de Carrd está en carrdme.com.

Lo que te da el plugin de acordeón para Carrd

El plugin es HTML plano, CSS y unas líneas de JavaScript vainilla en un único bloque embed. Sin framework, sin cargas de scripts externos, sin branding de terceros. Ese punto del JS vainilla importa más de lo que parece: algunas alternativas tiran de un framework entero desde un CDN solo para abrir y cerrar un div (más sobre eso en la sección de alternativas).

La misma técnica de Inline Embed alimenta otros elementos interactivos en Carrd. Una vez que esto funciona también puedes añadir un popup modal a Carrd con el mismo enfoque.

Lo que necesitas antes de empezar

Todo lo que sigue asume que tienes esto en su sitio:

Carrd ofrece una prueba de Pro de 7 días si solo quieres probar el embed antes de pagar. Para lo que incluye cada plan más allá de los embeds, mira la reseña de Carrd.co.

Cómo añadir un FAQ tipo acordeón a Carrd

Cinco pasos, todos dentro del editor de Carrd más una prueba rápida en el sitio en vivo.

1. Descarga el código de acordeón gratis para Carrd

Coge el código gratis de carrdme.com. Es un único bloque de HTML, CSS y JavaScript que pegarás en Carrd. La descarga es gratis de verdad: introduce “0 $” y obtienes el mismo archivo (una propina es opcional).

Si el enlace de descarga muestra un intersticial de Cloudflare, ábrelo en un navegador normal. Bloquea herramientas automatizadas pero carga bien para humanos.

2. Añade un elemento Embed en Carrd

Abre tu sitio Carrd en el editor. En la sección donde quieres el FAQ, haz clic en Add Element y selecciona Embed. Configura lo siguiente:

Pon Type a Code y Style a Inline. Inline coloca el acordeón exactamente donde está el elemento Embed en tu layout, ya que el acordeón es contenido visible. Hidden lo inyectaría en los bordes del head o body de la página.

Para más detalles sobre cómo funciona el sistema de embeds de Carrd, mira la documentación oficial de embeds de Carrd. (Esa URL solía vivir en carrd.co; el enlace viejo sigue redirigiendo.)

En una página larga, usa More Actions → Elements para abrir el Elements Panel. Es la forma rápida de volver al embed del acordeón después de haber scrolleado. Llegó en la actualización del builder de agosto de 2026.

3. Pega el código y personaliza tus ítems de FAQ

Pega el código completo en el campo Code del elemento Embed. Luego edita el contenido del FAQ. Cada ítem de acordeón sigue este patrón:

<button class="accordion" aria-expanded="false">Your question here?</button>
<div class="panel">
  <p>Your answer goes here. You can include multiple paragraphs, lists, or inline HTML.</p>
</div>

El atributo aria-expanded="false" es parte del setup de accesibilidad cubierto más abajo. Añadirlo ahora no cuesta nada y deja el markup listo.

El botón y su panel deben quedar adyacentes: el script abre el elemento que sigue inmediatamente al botón clicado.

Añade más ítems repitiendo el mismo bloque:

<button class="accordion" aria-expanded="false">What is your refund policy?</button>
<div class="panel">
  <p>We offer a full refund within 30 days of purchase. Contact support@example.com to start the process.</p>
</div>

<button class="accordion" aria-expanded="false">How do I contact support?</button>
<div class="panel">
  <p>Email us at support@example.com or use the contact form on our website. We respond within 24 hours.</p>
</div>

<button class="accordion" aria-expanded="false">Do you offer custom plans?</button>
<div class="panel">
  <p>Yes. Reach out with your requirements and we'll put together a tailored package.</p>
</div>

Reemplaza el texto de placeholder con tus preguntas y respuestas reales. Duplica o quita bloques para ajustar el número de ítems del FAQ.

4. Personaliza los colores del acordeón

El código incluye una sección <style> arriba con un comentario junto a cada color. Puedes reemplazar todo ese bloque <style> por este:

<style>
  /* Accordion styles */
  .accordion {
    background-color: #868e99; /* Accordion color */
    color: #eeebeb; /* Accordion text color */
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    transition: 0.4s;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 2.1rem;
  }
  .accordion:before {
    content: "\002B";
    color: #4d514d; /* Plus sign color */
    font-weight: bold;
    float: right;
    margin-left: 5px;
    border-radius: 50%;
    padding: 5px;
    transition: transform 0.3s ease-in-out;
  }
  .accordion.active:before {
    transform: rotate(45deg);
    background-color: #4d514d; /* Close (x) icon background */
    color: #d91a1a; /* Close (x) icon color */
  }
  .accordion.active,
  .accordion:hover {
    background-color: #4d514d; /* Hover and open tab color */
    border-radius: 10px;
  }
  .panel {
    padding: 0 18px;
    background-color: #eeebeb; /* Answer panel background */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    border-radius: 10px;
  }
  .panel p {
    margin: 0;
    padding: 10px 10px;
    font-size: 2.1rem;
  }
</style>

Cambia los valores hexadecimales de color para que encajen con la paleta de tu sitio. Los comentarios en el código facilitan encontrar cada propiedad.

5. Publica y prueba

Guarda tus cambios y publica el sitio. Solo puedes previsualizar el acordeón tras publicar. El editor de Carrd no renderiza JavaScript incrustado en el builder, y sus docs dicen lo mismo.

Corre esta checklist en el sitio en vivo:

Si el FAQ está debajo del fold, enlaza un ítem de menú directamente a él con enlaces de ancla con scroll suave de Carrd. Ahorra a los visitantes la caza del scroll en una one-page larga.

Haz el acordeón accesible (aria-expanded)

El markup ya usa elementos <button> reales, así que el soporte de teclado viene gratis. Lo que falta es estado: los lectores de pantalla no pueden saber si una pregunta está abierta. Dos líneas lo arreglan.

El handler de clic actualmente hace this.classList.toggle("active") e ignora el resultado. Captura el nuevo estado y refléjalo en aria-expanded:

<script>
  // Accordion script
  var acc = document.getElementsByClassName("accordion");
  for (var i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function () {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
      }
    });
  }
</script>

<script>
  // Accordion script (accessible)
  var acc = document.getElementsByClassName("accordion");
  for (var i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function () {
      var open = this.classList.toggle("active");
      this.setAttribute("aria-expanded", open);
      var panel = this.nextElementSibling;
      panel.style.maxHeight = open ? panel.scrollHeight + "px" : null;
    });
  }
</script>

<script>
  // Accordion script (multi-embed safe)
  var acc = document.getElementsByClassName("accordion");
  for (var i = 0; i < acc.length; i++) {
    if (acc[i].dataset.bound) continue; // already wired by another copy
    acc[i].dataset.bound = "1";
    acc[i].addEventListener("click", function () {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
      }
    });
  }
</script>

Con el script accesible, cada <button class="accordion"> también necesita aria-expanded="false" en el markup (ya añadido en el paso 3). classList.toggle devuelve el nuevo estado, así que el mismo clic que abre el panel pone el atributo a true, y el siguiente clic lo devuelve.

Incrustar varias secciones de acordeón en la misma página

Si necesitas dos o más grupos de FAQ separados en un sitio Carrd, añade un Inline Embed por grupo. Hay una trampa: el script del plugin adjunta un handler de clic a cada botón .accordion de la página, no solo a los de su propio embed. Con el código completo pegado dos veces, los botones del primer grupo obtienen dos handlers. Cada clic abre el panel e inmediatamente lo cierra otra vez, así que ese grupo parece muerto.

El arreglo es usar esta versión del bloque <script> en cada copia. Salta botones que otra copia ya haya cableado. Si también quieres el comportamiento de aria-expanded, el guardia queda arriba del bucle y las dos líneas de aria van dentro del listener, así:

<script>
  // Accordion script (multi-embed safe + accessible)
  var acc = document.getElementsByClassName("accordion");
  for (var i = 0; i < acc.length; i++) {
    if (acc[i].dataset.bound) continue; // already wired by another copy
    acc[i].dataset.bound = "1";
    acc[i].addEventListener("click", function () {
      var open = this.classList.toggle("active");
      this.setAttribute("aria-expanded", open);
      var panel = this.nextElementSibling;
      panel.style.maxHeight = open ? panel.scrollHeight + "px" : null;
    });
  }
</script>

El bloque <style> puede quedar duplicado en cada embed; reglas CSS idénticas no conflictúan. Cada botón sigue necesitando su <div class="panel"> directamente después, porque el script abre el elemento que sigue inmediatamente al botón clicado.

Troubleshooting: el acordeón de Carrd no funciona

Si tu acordeón de Carrd no funciona tras publicar, la causa es casi siempre una de estas.

Si el acordeón no aparece tras publicar, comprueba que el Type del elemento Embed es Code y su Style es Inline, y que está en la sección donde lo esperas. Confirma también que tu plan de Carrd soporta embeds (Pro Standard o superior).

Si no ves el elemento Embed en Add Element, el plan está por debajo de Pro Standard. El tier gratis topa en 3 sitios y excluye embeds por completo. Actualiza, o usa la prueba de Pro de 7 días para probar primero.

Si el acordeón se ve roto o sin estilos, asegúrate de que pegaste el código completo, incluyendo el bloque <style> de arriba, en el campo Code.

Si toda la sección se pone gris, tu copia usa un selector .active pelado que casa con la sección activa de Carrd. Cámbialo a .accordion.active (ver paso 4).

Si hacer clic en una pregunta no hace nada, abre la consola del navegador y busca errores de JavaScript. Si pegaste el código completo en dos embeds, los botones del primer grupo obtienen dos handlers de clic que se cancelan mutuamente. Usa el script de la sección de acordeones múltiples de arriba.

Si el texto es demasiado pequeño en móvil, añade un override de font-size en la sección de estilo del código. Por ejemplo: .accordion { font-size: 16px; } y .panel p { font-size: 15px; }.

Si el enlace de descarga muestra una página de Cloudflare o intersticial, ábrelo en un navegador normal. El enlace está detrás de un reto de bots para herramientas automatizadas; la página del plugin está viva y alcanzable a mano.

Para deshacerlo todo: borra el elemento Embed y republica. Nada más en Carrd se toca, así que el rollback es así de simple.

Alternativas al enfoque de embed de código

Si prefieres no gestionar código crudo, o quieres un estilo visual diferente, hay otras tres rutas. Mi opción por defecto sigue siendo el snippet de CarrdMe de arriba: gratis, sin branding, totalmente editable, y el menor impacto en peso de página.

Opción sin JavaScript: <details>/<summary>

Como el Inline Embed acepta HTML arbitrario, <details>/<summary> nativo te da un acordeón funcional con cero JavaScript. El navegador maneja abrir y cerrar:

<details class="faq">
  <summary>What is your refund policy?</summary>
  <p>Full refund within 30 days. Contact support@example.com to start the process.</p>
</details>

<details class="faq">
  <summary>How do I contact support?</summary>
  <p>Email us at support@example.com. We respond within 24 hours.</p>
</details>

Da estilo a summary como la barra .accordion (fondo, padding, border-radius, cursor) y cambia el icono de más por una regla summary::before. El compromiso es la animación: no hay transición max-height suave por defecto. El CSS más nuevo con interpolate-size y transition-behavior: allow-discrete puede animarlo, pero el soporte de navegadores sigue irregular a octubre de 2026, así que yo saltaría la animación aquí.

La versión JS está animada y acepta la mejora de aria. <details>/<summary> es a prueba de balas pero sin animar.

Widget de acordeón de Common Ninja

Un servicio de widgets alojado que genera el acordeón por ti y te da un snippet de embed. Precios a octubre de 2026:

• Tier gratis: 0 $, gratis para siempre, sin tarjeta requerida
• Essentials: 24 $/año (2 $/mes facturado anualmente)
• Pro: 38,40 $/año (3,20 $/mes facturado anualmente)
• Ultimate: 62,40 $/año (5,20 $/mes facturado anualmente)

Todos los tiers facturan anualmente; los precios de lista excluyen IVA. El tier gratis ha ido históricamente con branding de Common Ninja, y los tiers de pago son los que lo quitan. Ten en cuenta que es un widget alojado: un script de terceros carga en tu página y tienes menos control sobre la salida que con el snippet de CarrdMe.

Jason’s Plugins para Carrd

plugins.carrd.co aloja dos variantes de acordeón, y ambas son gratis (“introduce 0 $, o cualquier propina que desees”):

• Accordion FAQs drop-down: ligero y minimal con iconos chevron animados. Demo: accordionfaqs.carrd.co.
• Animated accordion FAQs drop-down: el mismo desplegable con una animación de rebote en vez del chevron. Demo: animatedaccordionfaqs.carrd.co.

Dos cosas cambian el flujo aquí. Primero, llegan como plantillas de Carrd: tras descargar vas al dashboard de Carrd, eliges New site, abres la pestaña My Templates y seleccionas la plantilla. Luego copias el código de ese sitio plantilla y lo fusionas en el tuyo. Segundo, la variante animada carga Vue.js desde un CDN. En un sitio de una página donde cuentas kilobytes, eso es notablemente más pesado que el snippet de JS vainilla de CarrdMe.

Si te gusta el enfoque de CarrdMe y quieres la misma técnica para contenido con pestañas, el plugin de tabs de Carrd funciona igual: un Inline Embed, sin framework.

¿Mostrará Google mi FAQ de acordeón como rich result?

Respuesta corta: probablemente no. A octubre de 2026, Google muestra rich results de FAQ solo para sitios web gubernamentales y de salud conocidos y autoritativos, y los rich results de How-to han desaparecido por completo.

El schema en sí es inofensivo y sigue siendo útil para semántica y otros buscadores. Solo no añadas JSON-LD de FAQPage (vía un embed Hidden → Head) esperando listados de FAQ expandibles en la SERP de Google.

Para acabar

Resumen del coste total: 19 $/año de Carrd Pro Standard es el único coste, y el código del acordeón es gratis. Coge el plugin, pégalo en un Inline Embed, publica, y tienes un desplegable de FAQ funcional. Para quitarlo más tarde, borra el elemento Embed y republica; nada más en Carrd se toca.

Siguiente en tu sitio Carrd: un sticky header, una tabla de precios, y enlaces de ancla con scroll suave que saltan directo al FAQ.

Respuestas rápidas