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

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:

• Add Stickey Header Carrd
• Add Carrd Cookie Notice
• How To Add Pricing Table to Carrd.co
• Carrd.co Review
• How To Add Custom Domain to Carrd.co
• Carrd.co Mobile Responsive Navbar

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

2. Add a container and embed widget

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

5. Save and publish

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.

Carrd.co