Vue-collapsible-component NPM

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.

<template>
  <Collapsible class="example-collapsible">
    <div slot="trigger">
      <div class="customTrigger">
        <h2>Custom open trigger element</h2>
      </div>
    </div>

    <div slot="closedTrigger">
      <div class="customTrigger">
        <h2>Custom closed trigger element</h2>
      </div>
    </div>

    <div id="example2">
      <p>
        Lorem ipsum dolor sit ...
      </p>
    </div>
  </Collapsible>
</template>

<script>
  import 'vue-collapsible-component/lib/vue-collapsible.css';
  import Collapsible from 'vue-collapsible-component';

  export default {
    components: {
      Collapsible,
    },
  };
</script>