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
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:
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; }