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

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

READ :  Vuejs DataTables responsive Example

Example – 1

How to expand/collapse all rows in Vuejs Example

E-junkie: Sell digital downloads online

E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!

Also see:

  1. The Top 10+ Best Webinar Software Platforms For 2020-2021
  2. Build Your Future Godaddy Careers And Jobs
  3. Introduction To Web Hosting Services

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

READ :  Angular Resource Encode and Decode URL