Vue Expand Collapse using Vuejs-Expand and collapse with Vuejs – Accordion

Vue Expand Collapse using Vuejs-Expand and collapse with Vuejs – Accordion

Collapsibles are useful when you want to section hide and show large more amount of Data content with user friendly.

What is Accordion?

Simple Meaning of Accordion widgets and More menus are widely simple used on the websites or mobile Application to manage More the large amount of Data content and Simple Way to navigation lists(Panel Type).
-With Bootstrap collapse and vuejs plugin you can either simple In this Example to create accordion or a simple (Expand and Collapse) collapsible panel pure vuejs script without writing any JavaScript code.
-Accordions are very useful when you want to toggle between hiding and showing large amount of content:Vue Expand Collapse using Vuejs-Expand and collapse with Vuejs – Accordion

Example – 1

How to expand/collapse all rows in Vuejs Example

Inlcude Libs

http://cdnjs.cloudflare.com/ajax/libs/vue/0.9.2/vue.min.js
http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js
http://getbootstrap.com/dist/css/bootstrap.min.css

index.html

<section id="liveparent">
    <div class="item panel panel-success">
        <div class="header panel-heading">
             <h3 class="panel-title">List {{greet}}</h3>

        </div>
        <div class="content">
            <div class="panel-body">infinityknow.com...
                <br />infinityknow.com...
                <br />infinityknow.com...
                <br />infinityknow.com...
                <br />infinityknow.com...
                <br />
            </div>
        </div>
    </div>
</section>

index.js

// Using a basic set of effect
var pagesideeffect = {
    enter: function (el, insert, timeout) {
        console.log('enter');
        var duration = 0.35; //seconds
        el.style.maxHeight = el.scrollHeight + "px";
        insert();
        TweenMax.to(el, duration, {
            ease: Power4.easeOut,
            maxHeight: el.scrollHeight
        });
    },
    leave: function (el, remove, timeout) {
        console.log('leave');
        var duration = 0.35; //seconds
        el.style.maxHeight = el.scrollHeight + "px";
        TweenMax.to(el, duration, {
            maxHeight: "0",
            padding: "0",
            ease: Power4.easeOut,
            onComplete: remove
        });
    }
};

Vue.component('item', {
    methods: {
        mydatatoggle: function () {
            //console.log('toggle content');
            this.alldatacontentislive = !this.alldatacontentislive;
            if (this.alldatacontentislive) this.$dispatch('content-visible', this);
        }
    },
    data: {
        greet: "My Line Menu",
        alldatacontentislive: false
    },
    ready: function () {
        this.greet += this.$index;
    },
});

Vue.component('content', {
    data: {},
    effects: {
        slide: pagesideeffect // used in the source, so putting both
    }
});

var liveparent = new Vue({
    el: '#liveparent',
    created: function () {
        this.$on('content-visible', function (item) {
            //console.log("content-visible event received");
            if (this.accordionLike) {
                var products = this.$.products;
                for (i = 0; i < products.length; i++) {
                    var tempItem = products[i];
                    if (tempItem !== item && tempItem.alldatacontentislive) tempItem.alldatacontentislive = false;
                }
            }
        })
    },
    methods: {},
    data: {
        accordionLike: true,
        products: [0, 1, 2, 3, 4, 5]
    }
});

style.css

.header {
}
.content {
    overflow: hidden;
}
h3.panel-title {
    font-size: 32px;
}

Example