vue-collapsible

A simple collapsible / accordion.

Demo

Install

npm install --save-dev vue-collapsible/

or include build/bundle.js.

Usage

# in your component
components:
  "collapsible": require("vue-collapsible/collapsible")
  "collapsible-item": require("vue-collapsible/collapsible-item")
# or, when using bundle.js
components:
  "collapsible": window.vueComps.collapsible
  "collapsible-item": window.vueComps.collapsibleItem

<collapsible>
  <collapsible-item>
    <h4 slot="header">header1</h4>
    <p>body 1</p>
  </collapsible-item>
  <collapsible-item>
    <h4 slot="header">header21</h4>
    <p>body 2</p>
  </collapsible-item>
</collapsible>

For examples see dev/.

Props

Collapsible

Name	type	default	description
accordion	Boolean	false	only one child opened at a time
class	String	collapsible	class of the ul
transition-in	function	no animation	used to animate the child. Arguments: {el}
transition-out	function	no animation	used to animate the child. Arguments: {el}
item-class	String	collapsible-item	class of the li
header-class	String	collapsible-header	class of the header div
body-class	String	collapsible-body	class of the body div

Collapsible-item

Name	type	default	description
is-opened	Boolean	false	(two-way) is child opened
stay-open	Boolean	false	(only with accordion) will stay open

Events on collapsible-item

Name	description
before-open	fires before transition in
opened	fires after transition in
before-close	fires before transition out
closed	fires after transition out

Development

Clone repository.

npm install
npm run dev

Browse to http://localhost:8080/.

License

Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.