Vue Js Toggle Show More and Show Less Text

Vue Js Show More and Show Less Text : “Show More” and “Show Less” are common user interface patterns used to display a limited amount of content initially, and allow the user to expand or collapse the content as desired. In Vue.js, you can implement this pattern using a combination of data properties, computed properties, and conditional rendering.In this tutorial we will learn how to toggle show more and show less text.

How to implement a show more/show less Text using Vue.js?

The code defines two methods, ‘collapseText’ and ‘expandText’, within a Vue.js component.

The ‘collapseText’ method takes in a parameter ‘textSize’, which specifies the number of characters to display. It then sets the component’s ‘displayedText’ data property to a substring of the full ‘paragraph’ data property, using the ‘slice’ method. Specifically, it takes the first ‘textSize’ characters of the paragraph. Finally, it toggles the value of the ‘isCollapsed’ data property using the not operator (!).

The ‘expandText’ method sets the component’s ‘displayedText’ data property to the full ‘paragraph’ data property. It also toggles the value of the ‘isCollapsed’ data property using the not operator (!).

Overall, these methods allow the user to toggle between a collapsed and expanded view of a paragraph of text.

Vue Js Show More And Show Less Text Example

<div id="app">
    <p>{{ displayedText }}</p>
	<p class="text-btn" @click="expandText" v-if="isCollapsed">Show more</p>
	<p class="text-btn" @click="collapseText(200)" v-else>Show less</p>
</div>
<script type="module">
		const app = Vue.createApp({
			data() {
				return {
					paragarph:
						"Vue.js is a popular JavaScript framework that allows developers to create dynamic and interactive user interfaces. With Vue.js, developers can build a wide range of UI elements, including the 'Show More/Show Less' feature. This feature is a common design pattern that allows users to expand or collapse content within a webpage. It is particularly useful for displaying long-form content, such as articles, product descriptions, and user reviews. In this article, we will explore how to implement the 'Show More/Show Less' feature in Vue.js",
					displayedText: "",
					isCollapsed: false,
				}
			},
			mounted() {
				this.collapseText(200);
			},

			methods: {
				collapseText(textSize) {
					this.displayedText = this.paragarph.slice(0, textSize);
					this.isCollapsed = !this.isCollapsed;
				},
				expandText() {
					this.displayedText = this.paragarph;
					this.isCollapsed = !this.isCollapsed;
				},
			},
        });
		app.mount('#app');
</script>