Bootstrap-vue Collapse: show state with arrow

This was my solution in the end, based on Riddhi's answer:

<b-btn block href="#" v-b-toggle.accordion1 variant="secondary">   Time Period     <span class="when-opened">         <font-awesome-icon icon="chevron-down" />     </span>     <span class="when-closed">         <font-awesome-icon icon="chevron-right" />     </span></b-btn><b-collapse id="accordion1" role="tabpanel">   <!-- some content --></b-collapse>

With additional CSS:

<style scoped>...    .collapsed > .when-opened,    :not(.collapsed) > .when-closed {        display: none;    }...</style>

I installed and imported the Font Awesome packages, as described here https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs and https://origin.fontawesome.com/how-to-use/with-the-api/setup/importing-icons. The import code, in my main.js file, lookes like this:

import Vue from 'vue'...import { library } from '@fortawesome/fontawesome-svg-core'import { faChevronRight, faChevronDown } from '@fortawesome/free-solid-svg-icons'import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'library.add(faChevronRight, faChevronDown);Vue.component('font-awesome-icon', FontAwesomeIcon);...

Example HTML markup:

     <b-btn v-b-toggle.myCollapse>          <span class="when-opened"><i class="fa fa-chevron-down" aria-hidden="true"></i></span>          <span class="when-closed">    <i class="fa fa-chevron-up" aria-hidden="true"></i></span>          My Collapse        </b-btn>        <b-collapse id="myCollapse">          <!-- content here -->        </b-collapse>

Example Custom CSS:

.collapsed > .when-opened,:not(.collapsed) > .when-closed {  display: none;}

You can achieve this with the help of above css classes.

you can use a custom behavior when change the status with the event this.$root.$on check this doc:

https://bootstrap-vue.org/docs/components/collapse#collapse

a simple example :)

Vue.use(BootstrapVue);new Vue({  el: '#app',  data() {      // collapsed has the status      return { collapsed: false };    },    mounted() {     // Emitted when collapse has     // changed its state     this.$root.$on(      'bv::collapse::state',      // id of the collapse component      // collapse is the state      // true => open, false => close       (id, collapsed) => {        if (id === "my-collapse") {          this.collapsed = collapsed;        }      });// $on    },    // plus    computed: {      btnVariant: function () {        return this.collapsed?          'danger' : 'info'      },      btnTxt:  function () {        return this.collapsed?           '🡇 Show ' : '🡅 Hide';      }    }});

<!-- Required Stylesheets --><link type="text/css" rel="stylesheet"  href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/><link  type="text/css"  rel="stylesheet"  href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/><!-- Required scripts --><script src="https://unpkg.com/vue"></script><script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script><!-- markup template --><div id="app">  <b-button    v-b-toggle:my-collapse    :variant="btnVariant">    {{ btnTxt }} - Collapse  </b-button>  <b-collapse id="my-collapse">    Lorem ipsum dolor sit amet...  </b-collapse></div>