---
title: "How To Add Accordion FAQs Drop-Down to Carrd.co"
description: "Let's see how an accordion can be added easily and free to a carrd.co website."
date: 2023-07-31
categories: ["cms"]
tags: ["carrd"]
---

import Button from "../../layouts/components/widgets/Button.astro";
import { Picture } from "astro:assets";
import YouTubeEmbed from "../../layouts/components/widgets/YouTubeEmbed.astro";
import imag1 from "../../assets/images/23/05/carrd-embed.png";

In this tutorial, we are going to see how you can add a nice accordion widget to your carrd.co website. With the widghet, you will be able to:

- change the colours - you can change the colors of the tabs as you like, you can change the colors to everything.
- add as many tab as you like - you can easily add as many tab as you link
- mobile responsive - the tabs look good on mobile and on desktop

For using the code you will need to have a plan that allows embeds as this is a piece of code you are adding. The code can be downloaded from:

> The complete list with Carrd plugins, themes and tutorials you can find on my **[carrdme.com](https://carrdme.com/)** website.

<Button link="https://go.carrdme.com/accordion" text="Carrd.co accordion" />

Some Carrd Tutorials:

- [Add Stickey Header Carrd](https://www.bitdoze.com/add-stickey-header-carrd/)
- [Add Carrd Cookie Notice](https://www.bitdoze.com/add-cookie-notice-carrd/)
- [How To Add Pricing Table to Carrd.co](https://www.bitdoze.com/carrd-add-pricing-table/)
- [Carrd.co Review](https://www.bitdoze.com/carrd-review/)
- [How To Add Custom Domain to Carrd.co](https://www.bitdoze.com/carrd-add-domain/)
- [Carrd.co Mobile Responsive Navbar](https://www.bitdoze.com/carrd-mobile-navbar/)

## Steps to add Accordion FAQs Drop-Down to Carrd.co

You can check the bellow video for the detailed steps:

<YouTubeEmbed
  url="https://www.youtube.com/embed/c7WfK-LviA4"
  label="How To Add Accordion FAQs Drop-Down to Carrd.co"
/>

### 1. Download the code

The code you need is free and you can download it from [here](https://go.carrdme.com/accordion)

### 2. Add a container and embed widget

<Button link="https://carrdme.com/" text="Carrd Plugins and Themes" />

In the section, you would like to add your accordion you just need to select a container and add an embed widget from carrd editor.

### 3. Add your tabs

In the bellow code you can add or remove tabs, you can change the name as you like or you can add the text you want.

```html
<button class="accordion">Tab 1</button>
<div class="panel">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
    Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies
    sed, dolor.
  </p>
</div>

<button class="accordion">Tab 2</button>
<div class="panel">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
    Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies
    sed, dolor.
  </p>
</div>

<button class="accordion">Tab 3</button>
<div class="panel">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
    Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies
    sed, dolor.
  </p>
</div>

<button class="accordion">Tab 4</button>
<div class="panel">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
    Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies
    sed, dolor.
  </p>
</div>
```

<Button link="https://try.carrd.co/bitdoze" text="Carrd.co" />

### 4. Use the colours you want

In the beginning of the code you have the style that you can modify to have the design you like. All the colors are commented and you can add the code you want

### 5. Save and publish

<Button link="https://carrdme.com/" text="Carrd Plugins and Themes" />

After you finish with the modifications you can save and see how it looks, you can only view it after you publish all the changes.

You can use the link below to try carrd if you don't know about it already.

<Button link="https://go.bitdoze.com/carrd" text="Carrd.co" />