Sign in


Sign up


Bootstrap collapse

Bootstrap collapse plugin allows you to toggle content on your pages with a bit of JavaScript and some classes. A flexible plugin that utilizes a handful of classes for easy toggle behavior.


Basic examples

Click the buttons below to show and hide another element via class changes:

  1. .collapse hides content
  2. .collapsing is applied during transitions
  3. .collapse.show shows content

You can use a link with the href attribute, or a button.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.


<button class="btn btn-primary" collapse @click.prevent="collapse1 = !collapse1">Toggle1</button>
<a href="#" class="btn btn-info" @click.prevent="collapse1 = !collapse1">Toggle2</a>
<transition name="slide-toggle">
    <div v-show="collapse1" class="collapse-item">
      <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
    </div>
</transition>

data() {
    return {
        collapse1: false
    };
}

<style scoped>
    .collapse-item {
      overflow: hidden;
      padding-top: 10px;
    }
    .slide-toggle-enter-active,
    .slide-toggle-leave-active {
      transition: max-height .5s ease-in;
    }
    .slide-toggle-enter-active {
      max-height: 500px;
    }
    .slide-toggle-enter,
    .slide-toggle-leave-active {
      max-height: 0;
      margin: 0;
    }
    .slide-toggle-leave {
      max-height: 500px;
    }
</style>