Vue Responsive Collapsible Section Component (Collapsible)

Vue component to wrap content in Collapsible element with trigger to open and close.

!Alt text

It's like an accordion, but where any number of sections can be open at the same time.

Demo

See the demo source code for code examples of how to use.

Installation

Install via npm

``
npm install vue-collapsible-component
`

or yarn

`
yarn add vue-collapsible-component
`

Alternatively just download the Collapsible.vue file form the src folder and include it in your project in your chosen way.

Usage

Collapsible can receive any HTML elements or Vue component as it's children. Collapsible will wrap the contents, as well as generate a trigger element which will control showing and hiding.

To customise the trigger element use the trigger slot for the open state, and closedTrigger slot for the closed state.

`html



`

Props

These are the available overrides

---

#### openLabel

Set the default trigger open label

---

#### closedLabel

Set the default trigger close label

---

#### transitionDuration

Override the default CSS transition duration. Example 500ms

---

#### transitionTimingFunction

Override the default CSS transition timing function. Example ease-in-out

---

#### transitionDelay

Override the default CSS transition delay. Example 300ms

---

#### isOpen

Sets the default open/closed state. Use this to control the open/close state programmatically.

---

#### onCollapse `

Fired whenever the open/close state is changed with the new open/closed state.

---

Licence

MIT

Contributing

View the the README