Creating an Animated Accordion List Component in VueJS

See My Upcoming Book On Ionic & Vue JS

---

Creating an Animated Accordion List Component in VueJS

Using vue animations, vue slots & HTML data attributes I walk through how to create a component that you can pass a list of data and it will create a list with a header and a body that can be expanded and collapsed.

This video is not heavy on the ionic framework as most of my other videos are, but this component that is built here can be used in ionic or a plain vuejs application

Source Code

	<template>
	<div
	v-for="listItem in displayList"
	:key="listItem.id"
	style="margin: 8px; border:solid green 1px"
	>
	<div
	:ref="'header-' + listItem.id"
	class="ion-padding default-header"
	@click="headerClicked(listItem)"
	>
	title {{ listItem.name }}
	</div>
	<transition name="fade">
	<div
	:ref="'body-' + listItem.id"
	style="margin-top:8px;display:none; height: 100px;"
	v-show="expandElement(listItem)"
	>
	<slot :item="listItem"></slot>
	</div>
	</transition>
	</div>
	</template>
	<script>
	export default {
	// list of data to display
	props: ["list"],
	// data section of component
	data() {
	return {
	displayList: this.list
	};
	},
	methods: {
	/**
	* this function is called to determine if the element
	* should be in the expanded mode or not
	*/
	expandElement(listItem) {
	const curE = this.$refs["body-" + listItem.id];
	if (curE === undefined) return false;
	if (curE.dataset.isExpanded === "true") {
	return true;
	} else {
	return false;
	}
	},
	/**
	* this iterates through all of the elements in the list
	* and set data attribute isExpanded appropriately based on
	* this listItem that was clicked
	*/
	headerClicked(listItem) {
	this.displayList.map(function(e) {
	const curE = this.$refs["body-" + e.id];
	if (e === listItem) {
	if (curE.dataset.isExpanded === "true") {
	curE.setAttribute("data-is-expanded", false);
	} else {
	curE.setAttribute("data-is-expanded", true);
	}
	} else {
	curE.setAttribute("data-is-expanded", false);
	}
	}, this);
	this.displayList = [...this.displayList];
	}
	}
	};
	</script>
	<style scoped>
	.default-header {
	background-color: gray;
	margin: 2px;
	text-transform: uppercase;
	}
	.fade-enter-active,
	.fade-leave-active {
	transition: height 0.3s ease-in-out;
	overflow: hidden;
	}
	.fade-enter-from,
	.fade-leave-to {
	height: 0px !important;
	}
	</style>

view raw acc.vue hosted with ❤ by GitHub

Links and References Used

• Data Attributes: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
• Vue Animations: https://v3.vuejs.org/guide/transitions-enterleave.html#transitioning-single-elements-components
• Vue Slots: https://v3.vuejs.org/guide/component-slots.html#scoped-slots

Get Information On Upcoming Ionic VueJS eBook

• https://leanpub.com/ionic-vue-sqlite-crud/

Comments

[Aaron K Saunders]

Yesterday after I posted a video showing how to build an accordion component in
Ionic framework and vuejs I realized it was overkill; I rebuilt the same thing using #HTML5 & #CSS #javascript

Here is a link to the video and the source code
youtube.com/watch?v=4BGfvKpP-b0SEE

[whitersun]

And I love you to post a video on youtube talk about how to use a feature of Ionic Vue. How to use components and fetch data by ionic vue.

Actually, you are saving me a lot in my project when I dead-end no other way to find the greater answer.

[Sardor Aminov]

Great! 🚀

[whitersun]

Yeah, I agreed with you. Ionic Vue is not stable for now to the public on ionic. Ionic Vue was missing a lot of great components like another fw.