5 Balloons

In this post, let’s cover how we can create a simple Accordion component using VueJS and Boostrap styling library.

Here is the Vue Component

Vue.component('toggle-component',{
        template: `<div class="toggle" :class="{ active: isActive }">
            <div class="toggle-title border-bottom py-3 font-weight-bolder text-secondary" @click="toggleContent">
                <slot name="title"></slot>
            </div>
            <transition name="fadeHeight" mode="out-in">
                <div class="toggle-content py-3" v-if="isActive">
                    <slot name="content"></slot>
                </div>
            </transition>
        </div>`,
        data(){
            return{
                isActive: false
            }
        },
        methods:{
            toggleContent(){
                this.isActive = !this.isActive
            }
        }
    });

In the template named slot and used two sections in the template, one with class toggle-title and one with toggle-content.

In the javascript, we used a single data property that keeps track of if the content is visible, we toggle the property on the click of the title.

Here is the CSS

.toggle-title {
    position: relative;
    cursor: pointer;
}

.toggle-title:before {
    content: " ";
    position: absolute;
    top: calc(50% + 1px);
    right: 14px;
    border-color: #ccc;
    border-top: 1px solid;
    border-right: 1px solid;
    width: 8px;
    height: 8px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform .3s,top .3s;
    transform: rotate(-45deg) translate3d(0,-50%,0);
    transform-origin: 35%;
}

.toggle.active>.toggle-title:before {
    top: calc(50% - 8px);
    transform: rotate(135deg);
}

.fadeHeight-enter-active,
.fadeHeight-leave-active {
  transition: all 0.3s;
  max-height: 230px;
}
.fadeHeight-enter,
.fadeHeight-leave-to
{
  opacity: 0;
  max-height: 0px;
}

Here is how you can use this component to create a collapse and expand style accordion

<div id="app">
    <toggle-component>
        <template v-slot:title>
            This is a sample title 1
        </template>
        <template v-slot:content>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, explicabo eaque rerum numquam error dolore autem dolor, esse consequatur voluptas necessitatibus rem. Minus nobis, atque mollitia aliquid repellat qui nulla!
        </template>
    </toggle-component>
    <toggle-component>
        <template v-slot:title>
            This is a sample title 2
        </template>
        <template v-slot:content>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, explicabo eaque rerum numquam error dolore autem dolor, esse consequatur voluptas necessitatibus rem. Minus nobis, atque mollitia aliquid repellat qui nulla!
        </template>
    </toggle-component>
    <toggle-component>
        <template v-slot:title>
            This is a sample title 3
        </template>
        <template v-slot:content>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, explicabo eaque rerum numquam error dolore autem dolor, esse consequatur voluptas necessitatibus rem. Minus nobis, atque mollitia aliquid repellat qui nulla!
        </template>
    </toggle-component>
</div>

Demo