Add Show More & Less feature using VueJS

Posted 10:21 am by muni & filed under JAVASCRIPT, VueJS.

I had splitted this tutorial onto two parts.

1. Simple Add Show More & Less feature using VueJS
2. Dynamic List Show More & Less Feature Using VueJS

Step 1:

Create index.html file and add the following scripts in it.

<script src="https://unpkg.com/vue"></script>
<div id="app">
    <h1 class="title">{{title}}</h1>
    <div>
        <div class="mb-1 gray-bg" v-show="!showFlag">
            <p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <p class="btn" @click="showFlag=true;">Show More</p>
        </div>

        <div class="mb-1 gray-bg" v-show="showFlag">
            <p class="mb-1">Velit adipisicing quis mollit consequat ullamco veniam ipsum in laborum excepteur veniam nostrud qui amet. Quis ipsum nostrud reprehenderit consectetur consectetur consequat id. Ipsum nostrud magna aliquip nisi ea nisi Lorem ut cillum nisi eiusmod tempor. Aute incididunt commodo ea deserunt in quis esse eiusmod voluptate nisi veniam anim.<br/><br/>Esse eiusmod veniam sunt reprehenderit magna in. Eu officia sunt laborum qui irure ex ad excepteur ea duis quis esse sint occaecat. Laborum ut et dolor labore. Exercitation Lorem culpa quis sint sint exercitation elit ea aute culpa ex. Dolore Lorem consequat dolore consequat reprehenderit voluptate officia pariatur qui dolor ut Lorem labore quis. Sint proident id consequat cupidatat nostrud. Dolore sit labore reprehenderit sit cupidatat voluptate laboris incididunt.<br/> <br/>Qui amet consectetur anim proident dolore nisi dolore. Veniam dolore fugiat deserunt proident officia dolor in tempor ut nulla dolore elit ea labore. Ut anim esse do reprehenderit adipisicing. Et in Lorem incididunt nostrud et. Cillum quis enim nisi ad cillum.<br/></p>
            <p class="btn" @click="showFlag=false;">Show Less</p>
        </div>
    </div>
</div>
<script>
    var app = new Vue({
                data: function(){
                    return {
                        title: "Simple Show More & Less Feature Using VueJS",
                        showFlag: false,
                    }
                }
            });
    app.$mount("#app");        
</script>

Where I declared showFlag variable, which will help us to track show more & less status. By default less text and Show more button will show. When user clicks on Show more button showFlag set to true.

Now using v-show directive, we will show more text section with show less button. Meanwhile show less text section with show more button will get hidden. When user clicks on show less button showFlag set to false. Now v-show directive will hide more text section & show less text section.

Please leave comment, If you guys have any doubts.