How to use "close" function available in bootstrap-vue Collapse feature

This is how I am calling the collapse

this.$root.$emit('bv::toggle::collapse', 'my-collapse-id')

but it open and closes both if we click the same button, I would like to close the collapse with close function , aim is to perform something at the time of closing the collapse.

Is there an example of how can we use close function of collapse in bootstrap-vue? There is no example in official website docs.

Solution

to perform something at the time of closing the collapse

Instead of altering the toggle or trying to use the close function, just use the @hide event emitted by <b-collapse> when it starts closing to trigger whatever you'd like:

<b-collapse visible @hide="foo()">
  <b-card>C O N T E N T</b-card>
</b-collapse>

...
<script>
...
methods: {
  foo() {
    // do stuff
  },
},

This way, any time the collapse starts to close, the hide event will fire, and your method will run.

Another thing to note is that the close function you've linked is something that's exposed to children in <b-collapse>'s scoped slots, so you won't be able to call it outside of that context anyway.