Open only one accordion panel vue.js / bootstrap vue

Question

Building out a bootstrap-vue accordion and everything is working as expected however, i just added expand all / collapse all buttons which also function as I expected but now my issue is when I click on any of the accordion panels directly they ALL open. Is there a way to have them only open the clicked panel?

html:

   <div class="container container-accordion-one">
      <!--expand all / collapse all row -->
      <div class="row row-expand-collapse">
        <div class="offset-md-1 col-expand-collapse">
          <ul class="list-expand-collapse">
            <li><a href="#/" @click="showCollapse = true" class="font__card-body">Expand All</a></li>
            <li><a href="#/" @click="showCollapse = false" class="font__card-body">Collapse All</a></li>
          </ul>
        </div>
      </div>
      <!--end: expand all / collapse all row -->
      <div class="row">
        <div class="offset-md-1 accordion-style-one">
          <div role="tablist">
            <b-card no-body class="">
              <b-card-header href="#" v-b-toggle.accordion-1 header-tag="header" class="accordion-header" role="tab">
                <p class="font__accordion-header">Accordion 1</p>
                <i class="fal fa-plus accordionClosed" />
                <i class="fal fa-minus accordionOpen" />
              </b-card-header>
              <b-collapse id="accordion-1" v-model="showCollapse" role="tabpanel">
                <b-card-body>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio enim fugit, inventore odio odit perferendis quas quo veritatis voluptate.</p>
                </b-card-body>
              </b-collapse>
            </b-card>

            <b-card no-body class="">
              <b-card-header href="#" v-b-toggle.accordion-2 header-tag="header" class="accordion-header" role="tab">
                <p class=" font__accordion-header">Accordion 2</p>
                <i class="fal fa-plus accordionClosed" />
                <i class="fal fa-minus accordionOpen" />
              </b-card-header>
              <b-collapse id="accordion-2" v-model="showCollapse" role="tabpanel">
                <b-card-body>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio enim fugit, inventore odio odit perferendis quas quo veritatis voluptate.</p>
                </b-card-body>
              </b-collapse>
            </b-card>

            <b-card no-body class="">
              <b-card-header href="#" v-b-toggle.accordion-3 header-tag="header" class="accordion-header" role="tab">
                <p class=" font__accordion-header">Accordion 3</p>
                <i class="fal fa-plus accordionClosed" />
                <i class="fal fa-minus accordionOpen" />
              </b-card-header>
              <b-collapse id="accordion-3" v-model="showCollapse" role="tabpanel">
                <b-card-body>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio enim fugit, inventore odio odit perferendis quas quo veritatis voluptate.</p>
                </b-card-body>
              </b-collapse>
            </b-card>
          </div>
        </div>
      </div>
    </div>

js:

export default {
  name: 'm',
  components: {
   LinksTo
  },
  data() {
    return {
      showCollapse: false
    };
  }
};

Answer 1

Since you want each collapse to be able to be individually opened or closed, you need to have a v-model variable for each collapse. In the following I am using an array to store the collapse states:

<template>
  <div>
    <b-button @click="expandAll">Expand all</b-button>
    <b-button @click="collapseAll">Collapse all</b-button>

    <b-button block v-b-toggle.accordion-1 class="mt-2">Accordion 1</b-button>
    <b-collapse id="accordion-1" v-model="collapseStates[0]">
      <div>Lorem ipsum dolor sit amet.</div>
    </b-collapse>

    <b-button block v-b-toggle.accordion-2 class="mt-2">Accordion 2</b-button>
    <b-collapse id="accordion-2" v-model="collapseStates[1]">
      <div>Lorem ipsum dolor sit amet.</div>
    </b-collapse>

    <b-button block v-b-toggle.accordion-3 class="mt-2">Accordion 3</b-button>
    <b-collapse id="accordion-3" v-model="collapseStates[2]">
      <div>Lorem ipsum dolor sit amet.</div>
    </b-collapse>
  </div>
</template>

<script>
export default {
  data() {
    return {
      collapseStates: [false, false, false]
    }
  },
  methods: {
    expandAll() {
      this.collapseStates = this.collapseStates.map(x => true)
    },
    collapseAll() {
      this.collapseStates = this.collapseStates.map(x => false)
    }
  }
}
</script>

See a working fiddle at: https://jsfiddle.net/p60zktLs/