Collapse - Bootstrap-Vue

https://bootstrap-vue.github.io/docs/components/collapse

HTML

<link rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/tether@latest/dist/css/tether.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
  <p>
    <b-btn v-b-toggle.collapse1 variant="primary">Toggle Collapse</b-btn>
  </p>

  <b-collapse id="collapse1">

    <b-card>
      Collapse contents Here

      <b-btn v-b-toggle.collapse2 size="sm">Toggle Inner Collapse</b-btn>

      <b-collapse id=collapse2 class="mt-2">
        <b-card>
          Hello!
        </b-card>
      </b-collapse>

    </b-card>

  </b-collapse>
  
  <p>
    <b-btn v-b-toggle.collapse1 variant="primary">Toggle Collapse</b-btn>
  </p>

  <b-collapse id="collapse1">

    <b-card>
      Collapse contents Here

      <b-btn v-b-toggle.collapse2 size="sm">Toggle Inner Collapse</b-btn>

      <b-collapse id=collapse2 class="mt-2">
        <b-card>
          Hello!
        </b-card>
      </b-collapse>

    </b-card>

  </b-collapse>
</div>

CSS

#app {
  padding: 20px;
  height: 350px;
}

JavaScript

new Vue({
  el: '#app'
})