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

Dragos
July 31, 2023
- Cms

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 website.

Carrd.co accordion

Some Carrd Tutorials:

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

You can check the bellow video for the detailed steps:

1. Download the code

The code you need is free and you can download it from here

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.

<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>

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