Accordion FAQs drop-down in Carrd

A Carrd demo for clean and minimal accordion FAQ drop-downs and animated icons.

Frequently Asked Questions

ⓘ To embed 2 or more accordions on your Carrd site, check out this tutorial here.

📣 New Carrd plugin released: Mega nav bar

• See more Carrd plugins
• Download this template

Made by @jasonleowsg using Vue.js.

💚 Credits: Adapted from Vue accordion by Dima in Codepen

Double accordion FAQs drop-down tutorial

Here’s how you do embed the accordion a 2nd or 3rd time in the same Carrd site:Step 1:
- Look for the start of the CSS code, after the <style> tag. Find this code:
#app {
font: 100%/1.4 Roboto, sans-serif;
/*padding: 2em;*/
color: white;
}
- Change the id to a unique name. Right now it’s app, change it to app2 or anything unique you want (it has to be different from the other embedded accordions), like this:
#app2 {
font: 100%/1.4 Roboto, sans-serif;
/*padding: 2em;*/
color: white;
}Step 2:
- Look for the start of the HTML code, after the closing </style> tag.
- Change the id to a unique name. Right now it’s <div id=“app”>, change it to app2 or anything unique you want (it has to be different from the other embedded accordions), like this: <div id=“app2”>Step 3:
Scroll down the code to near the bottom, where it saysconst vm = new Vue({
el: “#app”,
...Change the const to something unique again (remember, this just has to be different from the other embedded accordions), and the el to match the id you used earlier, e.g.const vm2 = new Vue ({
el: “#app2”,Step 4:
Repeat for all the other embedded accordions by changing the id and const to unique names.Done!