Accordion in Vue

Accordion

In this article we will be creating an accordion with vue.js. An accordion is used in websites mostly for FAQ section where answer section expands or collapses when user clicks on question itself or any icon like chevron🔰, arrow➡️ or plus sign➕.

Preview: live Demo

First, we will create vue project using vite. So, ensure that vite and node is already installed on your computer. After installing vite type following command in command prompt or terminal and press Enter:

    npm init vite <project-name>

After pressing Enter you will be prompted with few questions like which framework you want to use vite with we will choose vue and which language JavaScript or TypeScript we will choose JavaScript.

After answering above questions vite will create a vue project for us. After that we have to run few commands in 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, lets install it.

    npm install -D less // installs less as dev-dependency

Once vite creates project for us we can run our project using command:

    npm run dev

Above command will start development server created by vite at http://localhost:5173/ and you will see a welcome page at this address.

Now, lets modify the project as per our need. 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.
As we are going to use LESS as css-preprocessor, create a folder less and inside of the folder create global.less file and add this code in it:

    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body{
        font-family: 'Source Sans Pro', sans-serif;
        background-color: antiquewhite;
    }

In 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 in to 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 components of all other components in our app. This component is passed to createApp function provided by vue.js which translates our vue code into native JavaScript, HTML and CSS and then the translated code is 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 browser. It is important to import other components in App.vue so that vue can translate the code in all of our components.

In src/components folder we created Accordion.vue component which houses all other components for our app. Currently, this component only contains a h1 tag with text 'Accordion'. So, if we run npm run dev in 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 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 further two 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 which 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:

id an unique number for identifying an object.
question stores faq question.
answer stores faq answer.
isOpen stores a boolean value which specifies whether answer part of 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 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 browser we have to extract those from array 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 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 total 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 lets 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 user clicks on a question or chevron icon it should toggle the answer part of that accordion meaning if 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 whether the answer part of 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 click event listener to header element which contains question and chevron icon. When 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 accordion and also we are adding 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 id of current item is equal to the id of clicked accordion and if it returns true that means 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 expanded answer part. So, if user clicks on some accordion to expand its answer part then answer parts of other accordion items should get collapsed 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😊.

Blog

Owais Khan

Accordion

Creating Accordion

Adding Functionality

Join Our Newsletter. No Spam, Only the good stuff.

Related