Create Simple Accordion Menu component using VueJS

Create Simple Accordion Menu component using VueJS

In this Post We Will Explain About is Create Simple Accordion Menu component using VueJS With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Simple accordion menu component for Vue.js Example

In this post we will show you Best way to implement vuejs Accordion menu component List , hear for Build A Collapsible Tree Menu With Vue.js Recursive Components with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Also Read :   Vue Expand Collapse using Vuejs-Expand and collapse with Vuejs - Accordion




Simple step by step learn for accordion menu component using Vuejs

Getting Started for Accordion Menu component using VueJS

We have used CDN(libes) for VueJS so you must need Your internet Data connection for them to work on Accordion Menu component using VueJS.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
//or way

//Install the package:
npm install vue-accordion

index.html

This is the main HTML view of our Simple Web Application. In here, we have init Base declared all our simple my this Example(Accordion Menu component using VueJS) dependencies and the HTML Elements that we have created.

<div id="liveApp">

  <div class="live-block">
    <button @click.prevent="liveAccordion(0)">live-block live24u</button>
    <div v-show="products[0].show">
      <p>i am Item number live24u</p>
      <p>i am Item number live24u</p>
    </div>
  </div>

  <div class="live-block">
    <button @click.prevent="liveAccordion(1)">live-block w3free</button>
    <div v-show="products[1].show">
      <p>i am Item number w3free</p>
      <p>i am Item number w3free</p>
    </div>
  </div>

  <div class="live-block">
    <button @click.prevent="liveAccordion(2)">live-block lastmenu</button>
    <div v-show="products[2].show">
      <p>i am Item number lastmenu</p>
      <p>i am Item number lastmenu</p>
    </div>
  </div>

  <hr/>

  <pre>{{ products | json}}</pre>

</div>

index.js

This contains our simple custom index.js files Add Like as javascript, vuejs scripts

Also Read :   VueJS Sorting and Filtering Table Grid

var vm = new Vue({
    el: '#liveApp',
    data: {
        products: [{show:false},{show:true},{show:false}]
    },
    methods: {
        liveAccordion: function (n) {  
            for(var i = 0; i < 3; i++) { // here close all products
                vm.products[i].show = false;
            }
            vm.products[n].show = true; // here open the corresponding Item
        }
    }
});

style.css

Last step, we have add the Following CSS styles for our simple Accordion Menu component using VueJS and our Custom styling.

.live-block{
color:red;
padding: 8px 12px;
background: #3d3d3d;
border-top: 1px solid #ccc;
text-decoration: none;
color: #c60000;
}

vuejs Accordion menu component

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Also Read :   Vuejs file upload Ajax formdata component Example





Example

I hope you have Got What is Create Simple Accordion Menu component using VueJS And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.