· cms · 3 min read

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

Let's see how an accordion can be added easely and free to a carrd.co website.

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

  • change the colours - you can change the colours to the tabs as you like, you can change the colours to everything.
  • add as many tab as you like - you can easely add as many tab as you link
  • mobile responsive - the tabs looks good on mobile and on desktop

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

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 a embed widget

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>

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 colours are commented and you can add the code you want

5. Save and puiblish

After you finished with the modifications you can save and see how is looking, you can only view it after you publish all the cnages.

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

Share:
carrd (4 Parts Series)
You might also like
Back to Blog