10,313 reads
Creating an Accordion With Vue.js: A Step-by-Step Tutorial
by Owais khanFebruary 23rd, 2023
Too Long; Didn't Read
In this article, we will be creating an accordion with vue.js. An accordion is used in websites mostly for FAQ sections where the answer section expands or collapses when a user clicks on the question itself or any icon. We will be using `LESS` as css-preprocessor.
Accordion
In this article, we will be creating an accordion with vue.js. An accordion is used in websites mostly for FAQ sections where the answer section expands or collapses when a user clicks on the question itself or any icon like chevron🔰, arrow➡️, or plus sign➕.
Preview: live Demo
First, we will create a Vue project using vite. So, ensure that vite and node are already installed on your computer. After installing vite, type the following command in the command prompt section or terminal and press <kbd>Enter</kbd>:
npm init vite <project-name>
After pressing <kbd>Enter</kbd> you will be prompted with a few questions like which framework you want to use vite with. We will choose vue. You’ll also be asked to choose between JavaScript and TypeScript. We will choose JavaScript.
After answering the above questions vite will create a vue project for us. After that we have to run a few commands in the terminal:
cd <project-name>
npm install // It will install all the necessary dependencies for our project in node_modules folder
We will be using LESS as css-preprocessor. So, let’s install it.
npm install -D less // installs less as dev-dependency
Once vite creates a project for us we can run our project using the following command:
npm run dev
The above command will start the development server created by vite at http://localhost:5173/ and you will see a welcome page at this address.
Now, let’s modify the project as per our needs. First, delete HelloWorld component from src/components folder then boilerplate code inside src/App.vue file and also delete style.css file from src folder.
Since we are using LESS as a css-preprocessor, create a folder less and inside the folder, create global.less file and add the following code to it:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Source Sans Pro', sans-serif;
background-color: antiquewhite;
}
In the above code, we are resetting the default browser styles and adding some general styles to body.
Open src/main.js and you will see something like this:
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app')
Replace ./style.css import with ./less/global.less because we deleted style.css file and created less/global.less file. After replacing main.js will look like this:
import { createApp } from 'vue'
import './less/global.less'
import App from './App.vue'
createApp(App).mount('#app')
Creating Accordion
First, we will create Accordion.vue component in src/components folder and import that component into our App.vue component.
Accordion.vue👇🏻
<script setup></script>
<template>
<h1>Accordion</h1>
</template>
<style scoped lang="less"></style>
App.vue👇🏻
<script setup>
/* importing Accordion.vue👇🏻 */
import Accordion from './components/Accordion'
</script>
<template>
<Accordion/> <!-- 👈🏻Using Accordion.vue -->
</template>
App.vue is the parent component of all other components in our app. This component is passed to the createApp function provided by vue.js which translates our vue code into native JavaScript, HTML, and CSS. The translated code is then passed to mount function which puts this translated code into an html element with id app inside index.html file which is then executed by the browser. It is important to import other components for App.vue so that vue can translate the code in all of our components.
In src/components folder we created anAccordion.vue component that houses all other components of our app. Currently, this component only contains a h1 tag with the text 'Accordion'. So, if we run npm run dev in the terminal and open browser, we will see 'Accordion' text on our screen.
Now, let's create a main container for our accordion and the container is simply a html main element. And also give some styling to it. Inside main we will create a div with class faqs which will contain all of our accordion items.
<script setup></script>
<template>
<main> <!-- 👈🏻Main container for accordion -->
<div class="faqs"></div>
</main>
</template>
<style scoped lang="less">
.main{
width: 500px;
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.5);
margin: 0 auto;
margin-top: 10%;
margin-bottom: 10%;
background-color: rgb(240, 248, 255);
padding: 10px;
border-radius: 6px;
.faqs{
display: flex;
flex-direction: column;
gap: 20px;
}
}
</style>
Now, we will create another component in src/component folder called Faq.vue in which we will write code for a single accordion item. Our single accordion item will have a div element with class faq which contains two div elements with classes header and answer respectively. In header element, we will create two further div elements with classes question and icon. question div will contain a faq-question and icon div contains a chevron image. And in answer element, we have a p element that contains faq-answer.
Faq.vue👇🏻
<script setup></script>
<template>
<div class="faq">
<div class="header">
<div class="question">
<!-- contains question -->
</div>
<div class="icon">
<img src="" alt=""/>
</div>
</div>
<div class="answer">
<p> <!-- contains answer --> </p>
</div>
</div>
</template>
<style scoped lang="less"></style>
Our accordion will have five questions in total and we will store those in an array of objects. Each object will have four properties:
-
ida unique number for identifying an object. -
questionstores faq question. -
answerstores faq answer. -
isOpenstores a boolean value that specifies whether the answer part of the accordion is expanded or collapsed.
const data = [
{
"id": 1,
"question": "What is the capital of Australia?",
"answer": "The capital of Australia is Canberra. It is a relatively new city, established in 1913, and is located between Sydney and Melbourne. Canberra is home to numerous national institutions and landmarks, including Parliament House, the Australian War Memorial, and the National Gallery of Australia. The city is known for its modern architecture and urban planning, and has a population of over 400,000 people. Despite not being one of the country's largest cities, Canberra is an important political and cultural center, and has a significant impact on the nation's economy and development.",
"isOpen": false
},
{
"id": 2,
"question": "What is the tallest animal on earth?",
"answer": "The tallest animal on earth is the giraffe, which can grow up to 18 feet tall. Giraffes are known for their long necks, which can reach up to 6 feet in length, and are used to reach leaves and fruits from tall trees. Giraffes are found in savannas and grasslands in Africa, and are herbivorous, feeding on leaves, fruits, and flowers. Despite their size, giraffes are social animals and live in groups called towers. They are also known for their distinctive spotted coat, which helps them blend in with their environment and avoid predators.",
"isOpen": false
},
{
"id": 3,
"question": "What is the largest country in the world by area?",
"answer": "The largest country in the world by area is Russia, which covers over 17 million square kilometers. Russia is located in northern Eurasia, and is bordered by Norway, Finland, Estonia, Latvia, Lithuania, Poland, Belarus, Ukraine, Georgia, Azerbaijan, Kazakhstan, China, North Korea, and Mongolia. Russia has a population of over 144 million people, and is known for its rich history and culture, as well as its natural resources, such as oil, gas, and minerals. The country is also home to numerous landmarks and tourist attractions, including the Red Square, the Kremlin, and the Hermitage Museum.",
"isOpen": false
},
{
"id": 4,
"question": "What is the largest animal on earth?",
"answer": "The largest animal on earth is the blue whale, which can grow up to 100 feet in length and weigh up to 200 tons. Blue whales are found in all the world's oceans, and are known for their distinctive blue-gray coloration and long, slender bodies. They are filter feeders, feeding on tiny shrimp-like creatures called krill, and can consume up to 4 tons of krill in a single day. Despite their enormous size, blue whales are graceful swimmers and can travel at speeds of up to 30 miles per hour.",
"isOpen": false
},
{
"id": 5,
"question": "What is the capital of France?",
"answer": "The capital of France is Paris. It is one of the most famous cities in the world, known for its beautiful architecture, rich history, and world-class museums and landmarks. Paris is home to iconic landmarks such as the Eiffel Tower, the Louvre Museum, and Notre-Dame Cathedral, and is famous for its cuisine and fashion. The city has a population of over 2 million people, and is a global center for art, fashion, and culture. Despite its cosmopolitan character, Paris has retained much of its historic charm, with narrow streets",
"isOpen": false
}
]
In Accordion.vue we will store the above array as a reactive state using ref so import ref from vue. Currently, our questions and answers are in an array but to display them on the browser we have to extract those from arrays and put them into HTML elements. We have already created a component for that which is Faq.vue so import it. Faq.vue is a component for a single accordion or single question & answer so, we have to pass a single object from data array to the component at a time. We have a total of five questions & answers which means we have to call Faq.vue five times and pass a single object of question & answer each time. Calling Faq.vue five times is tedious so we will us v-for directive on Faq.vue to loop over data array and in each iteration, we will pass single faq object to the component.
<script setup>
import { ref } from 'vue'
import Faq from './Faq'
const faqs = ref(data) // data is above array of faq questions & answers
</script>
<template>
<main> <!-- 👈🏻Main container for accordion -->
<div class="faqs">
<!-- Looping over faqs array and passing single faq as a prop -->
<Faq
v-for="faq in faqs"
:key="faq.id"
:faq="faq"
/>
</div>
</main>
</template>
<style scoped lang="less">
.main{
width: 500px;
box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.5);
margin: 0 auto;
margin-top: 10%;
margin-bottom: 10%;
background-color: rgb(240, 248, 255);
padding: 10px;
border-radius: 6px;
.faqs{
display: flex;
flex-direction: column;
gap: 20px;
}
}
</style>
After passing faq as a prop, we have to recieve that inside of Faq.vue using defineProps macro. Then we can use faq object in template of Faq.vue to extract question & answer from it. We also need a chevron icon in each accordion so, let's import that and bind the src attribute of img element to it.
At the end, let’s add some styling to the component.
<script setup>
import chevron from '../assets/chevron.svg'
defineProps(['faq']) // recieving faq object as a prop.
</script>
<template>
<div class="faq">
<div class="header">
<div class="question">
{{ faq.question }} <!--Extracting question from faq prop -->
</div>
<div class="icon">
<img :src="chevron" alt="chevron-icon"/>
</div>
</div>
<div class="answer">
<p> {{ faq.answer }} </p> <!--Extracting answer from faq prop -->
</div>
</div>
</template>
<style scoped lang="less">
.faq{
flex-grow: 1;
.header{
display: flex;
align-items: center;
justify-content: space-between;
border: 2px solid antiquewhite;
padding: 10px;
border-radius: 6px 6px 0 0;
cursor: pointer;
.question{
font-weight: 700;
}
.icon{
width: 30px;
height: 30px;
transition: transform .5s;
img{
width: 100%;
height: auto;
}
&.open{
transform: rotate(180deg);
}
}
}
.answer{
height: 0;
overflow-y: scroll;
line-height: 1.5;
background-color: antiquewhite;
transition: height .5s;
&::-webkit-scrollbar{
width: 5px;
}
&::-webkit-scrollbar-track{
appearance: none;
background-color: transparent;
}
&::-webkit-scrollbar-thumb{
width: 5px;
background-color: rgb(232, 210, 182);
border-radius: 50px;
}
p{
padding: 10px;
}
&.open{
height: 200px;
}
}
}
</style>
By default answer, part of each accordion should be collapsed and we did it in css by giving .answer element height of 0 and setting overflow to scroll so that we can have scroll-bar on .answer if the content is long and it overflows. We also gave some styling to the scroll-bar also.
Adding Functionality
Whenever a user clicks on a question or chevron icon it should toggle the answer part of that accordion meaning if the answer part is collapsed it should expand and vice-versa. One thing to keep in mind is that click event will occur in Faq.vue component but the data that has to be updated is in Accordion.vue.Because Faq.vue is child component of Accordion.vue we can emit the event from Faq.vue and then listen to that emit event in Accordion.vue.
Another thing is that we have to keep track of whether the answer part of a particular accordion is collapsed or expanded for that we will use isOpen property of faq object in data array.
<script setup>
import chevron from '../assets/chevron.svg'
defineProps(['faq']) // recieving faq object as a prop.
const emit = defineEmits(['toggleAnswer']) // defining events to emit
const handleClick = id => emit('toggleAnswer', id) // emitting toggleAnswer event with id attribute.
</script>
<template>
<div class="faq">
<div class="header" @click="() => handleClick(faq.id)">
<div class="question">
{{ faq.question }} <!--Extracting question from faq prop -->
</div>
<div :class="['icon', {open: faq.isOpen}]">
<img :src="chevron" alt="chevron-icon"/>
</div>
</div>
<div :class="['answer', {open: faq.isOpen}]">
<p> {{ faq.answer }} </p> <!--Extracting answer from faq prop -->
</div>
</div>
</template>
<style scoped lang="less">
/* Styling goes here */
</style>
First in Faq.vue we will add a click event listener to the header element that contains question and chevron icon. When a user clicks on header it runs handleClick functions which emits toggleAnswer event to its parent component but to keep track of which accordion has been clicked we also send id of that faq object. Also, in template we are checking if faq.isOpen is true and if it is true then we are adding open class to answer element so that we can expand the answer part of the accordion. We also add open class to icon element which contains chevron icon because we need to rotate it if faq.isOpen is true.
<script setup>
import { ref } from 'vue'
import Faq from './Faq'
const faqs = ref(data) // data is above array of faq questions & answers
const toggleAnswer = id => {
faqs.value = faqs.value.map(faq => faq.id === id ? {...faq, isOpen: !faq.isOpen} : faq)
}
</script>
<template>
<main> <!-- 👈🏻Main container for accordion -->
<div class="faqs">
<!-- Looping over faqs array and passing single faq as a prop -->
<Faq
v-for="faq in faqs"
:key="faq.id"
:faq="faq"
@toggle-answer="toggleAnswer"
/>
</div>
</main>
</template>
<style scoped lang="less">
/* Styling goes here */
</style>
In Accordion.vue we are listening to toggle-answer which executes toggleAnswer function which takes id as a parameter sent by Faq.vue. In toggleAnswer function we are updating faqs state by looping over faqs array using map function. Inside map function in each iteration we are checking if the id of the current item is equal to the id of clicked accordion and if it returns true that means the current item is the accordion that was clicked so we are changing its isOpen property to true if it is false and vice-versa.
Another thing that we want in our Accordion is that at one time only one accordion item should have an expanded answer part. So, if a user clicks on some accordion to expand its answer part the answer parts of other accordion items should collapse if they are expanded. For that, we first have to set isOpen property of each accordion whose isOpen property is true to false except the one user just clicked by doing this we will make sure that every other accordion have collapsed answer part.
In Accordion.vue
const toggleAnswer = id => {
faqs.value = faqs.value.map(faq => faq.isOpen && faq.id !== id ? {...faq, isOpen: false} : faq)
faqs.value = faqs.value.map(faq => faq.id === id ? {...faq, isOpen: !faq.isOpen} : faq)
}
I hope you enjoyed this article😊.
L O A D I N G
. . . comments & more!
. . . comments & more!
