Animated accordion FAQs drop-down demo

A Carrd plugin template for an accordion FAQ drop-down with bounce web animation.

Made by @jasonleowsg.

📣 New Carrd plugin released: Mega nav bar

• See more Carrd plugins
• Download template

💛 Credits: Adapted from Takane Ichinose

Double accordion tutorial

How to embed a 2nd accordion and beyond:1. Look for the <style> tag, and find this CSS code:#app, .accordion, .accordion-item, .accordion-header, .accordion-body {
color: #727272;
...Change the #app to #app2, like this:#app2, .accordion, .accordion-item, .accordion-header, .accordion-body {
color: #727272;
...———2. Scroll a bit down and find these CSS code:#app {
background-color: transparent;/*#82dfff;*/
display: flex;
box-sizing: border-box;
}Again, change the #app to #app2, like this:#app2 {
background-color: transparent;/*#82dfff;*/
display: flex;
box-sizing: border-box;
}———3. Scroll further down and find this CSS code:@media screen and (min-width: 320px) {
#app {
padding: 2rem;
overflow: auto;
}Again, change the #app to #app2, like this:@media screen and (min-width: 320px) {
#app2 {
padding: 2rem;
overflow: auto;
}———4. Scroll down past the closing style tag </style> and find this HTML code:<div id="app" style="Check out https://plugins.carrd.co for more Carrd plugins">
<zz-accordion v-bind:contents.sync="contents">FAQs</zz-accordion>
</div>Again, change the id from app to app2, like this:<div id="app2" style="Check out https://plugins.carrd.co for more Carrd plugins">
<zz-accordion v-bind:contents.sync="contents">FAQs</zz-accordion>
</div>———5. Scroll down till you find this code:var app = new Vue({
el: '#app',
data: {
contents: [{
...Again, change the app to app2 at the two places, like this:var app2 = new Vue({
el: '#app2',
data: {
contents: [{
...———6. For 3rd accordion and beyond, repeat the same steps but use app3 instead.