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" v-repeat="products" v-ref="products" v-component="item">
        <div class="header panel-heading" v-on="click: mydatatoggle">
             <h3 class="panel-title">List {{greet}}</h3>

        </div>
        <div class="content" v-component="content" v-if="alldatacontentislive" v-effect="slide">
            <div class="panel-body">live24u.com...
                <br/>live24u.com...
                <br/>live24u.com...
                <br/>live24u.com...
                <br/>live24u.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

http://live24u.com/wp-content/uploads/2017/05/Vue-Expand-Collapse-using-Vuejs-Expand-and-collapse-with-Vuejs-–-Accordion.pnghttp://live24u.com/wp-content/uploads/2017/05/Vue-Expand-Collapse-using-Vuejs-Expand-and-collapse-with-Vuejs-–-Accordion-150x150.pngadminCSSHtmlJavaScriptJSONVueJSDirective collapse/expand using vuejs,How to expand/collapse all rows in Vuejs,v-model=collapse Example Vuejs - Simple Collapse Directive,vue.js - Vuejs - Accordion,Vuejs 2 collapse directive,Vuejs collapse animation,Vuejs collapse directive,Vuejs collapse list,Vuejs collapse v-for,Vuejs expand collapse animation,Vuejs expand collapse tableVue 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. (adsbygoogle = window.adsbygoogle || 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 index.js style.css (adsbygoogle = window.adsbygoogle || []).push({}); ExampleBIGGEST AND FASTEST Web Tutorials - live24u.com

No Comments Yet

Leave a Reply

Your email address will not be published.