How To Add Accordion FAQs Drop-Down to Carrd.co

Add an accordion FAQ drop-down to your Carrd site with a free code embed. Step-by-step guide covering setup, styling, and mobile responsiveness.

DragosJuly 9, 202610 min read

Carrd doesn’t have a built-in accordion element. If you want collapsible FAQ sections on your site, you need to embed custom code. The good news: there’s a free accordion plugin that handles this, and the setup takes about 5 minutes.

You’ll need a Pro Standard plan ($19/year) or higher. That’s the lowest Carrd plan that supports the Embed element for custom code. The accordion plugin is free to download — no paid add-on required.

Carrd accordion plugin

More Carrd tutorials:

The complete list of Carrd plugins, themes, and tutorials is on carrdme.com.

What the accordion plugin gives you

Customizable colors — change the background, text, and hover colors to match your site’s design.
Unlimited tabs — add as many FAQ items as you need by duplicating a simple HTML block.
Mobile responsive — the accordion looks good on both desktop and mobile screens.
Animated toggle — smooth open/close animation with a rotating chevron icon.

The plugin is built with Vue.js and wraps everything into a single embed block. You don’t need to install anything separately — just paste the code into a Carrd Embed element.

How to add the accordion FAQ to Carrd

1. Download the accordion code

Grab the free code from carrdme.com. It’s a single block of HTML, CSS, and JavaScript that you’ll paste into Carrd.

2. Add an Embed element in Carrd

Open your Carrd site in the editor. In the section where you want the FAQ, click Add Element and select Embed. Set the following:

Type: Code
Style: Hidden (the accordion renders its own visible elements, so the embed container itself should be hidden)

For more details on how Carrd’s embed system works, see the official Carrd embed documentation.

3. Paste the code and customize your FAQ items

Paste the full code into the Embed element’s Code field. Then edit the FAQ content. Each accordion item follows this pattern:

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

Add more items by repeating the same block:

<button class="accordion">What is your refund policy?</button>
<div class="panel">
  <p>We offer a full refund within 30 days of purchase. Contact [email protected] to start the process.</p>
</div>

<button class="accordion">How do I contact support?</button>
<div class="panel">
  <p>Email us at [email protected] or use the contact form on our website. We respond within 24 hours.</p>
</div>

<button class="accordion">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>

Replace the Lorem ipsum placeholder text with your actual questions and answers. Duplicate or remove blocks to match your FAQ count.

4. Customize the colors

The code includes a <style> section at the top with commented color variables. Look for lines like these:

/* Background color of accordion buttons */
.accordion {
  background-color: #f1f1f1;
}

/* Background color when hovering */
.accordion:hover {
  background-color: #ddd;
}

/* Text color */
.accordion {
  color: #444;
}

/* Panel background */
.panel {
  background-color: white;
}

Change the hex color values to match your site’s palette. The comments in the code make it straightforward to find each property.

Carrd Plugins and Themes

5. Publish and test

Save your changes and publish the site. You can only preview the accordion after publishing — Carrd’s editor doesn’t render embedded JavaScript in the builder.

Check these things on the live site:

Click each FAQ item. Does it expand and collapse smoothly?
Open the site on your phone. Is the text readable and the tap targets large enough?
Do the colors match your design?

Embedding multiple accordion sections on the same page

If you need two or more separate FAQ groups on one Carrd site, you’ll need to give each embed a unique ID. The default code uses #app as its container ID, so a second embed will conflict.

Here’s how to fix it for each additional accordion:

In the CSS section, change #app to a unique name like #app2.
In the HTML section, change <div id="app"> to <div id="app2">.
In the JavaScript section at the bottom, change el: "#app" to el: "#app2", and rename the const vm to something unique like const vm2.

// First accordion (unchanged)
const vm = new Vue({
  el: "#app",
  // ...
});

// Second accordion (unique names)
const vm2 = new Vue({
  el: "#app2",
  // ...
});

Repeat this pattern for each additional accordion embed.

Troubleshooting

Accordion doesn’t appear after publishing: Make sure the Embed element’s Style is set to Hidden. If it’s set to something else, the container may block the accordion from rendering. Also confirm your Carrd plan supports Embeds (Pro Standard or higher).

Accordion looks broken or unstyled: Carrd strips some CSS from embeds if the code is pasted into the wrong field. Make sure you’re pasting into the Code field (not the Label or URL field).

Animations don’t work: The accordion uses Vue.js for its toggle behavior. If you have another embed on the same page that also loads Vue, they may conflict. Check your browser console for JavaScript errors.

Text is too small on mobile: Add a font-size override in the style section of the code. For example: .accordion { font-size: 16px; } and .panel p { font-size: 15px; }.

Alternatives to the code embed approach

If you’d rather not manage raw code, there are two other options:

Common Ninja — a third-party widget service that generates an embeddable accordion. Their free tier includes branding. Paid plans start at around $5/month to remove it.
Jason’s Plugins for Carrd (plugins.carrd.co) — offers a free animated accordion plugin with a different visual style. Also a code embed, but with different default styling.

The CarrdMe accordion used in this tutorial is free, has no branding, and gives you full control over the code. For most use cases, it’s the better choice.

Table of Contents