I'm using Bootstrap-vue, and have a simple collapse component such that I can toggle the visibility of the content. I'm looking for a way to include an arrow icon in the toggle button that indicates the collapse state: arrow pointing down if content is opened, arrow pointing sideways if closed.
I have looked at the solution here Bootstrap 4 Collapse show state with Font Awesome icon. However, while this works for Bootstrap 4, I can't make it work with Bootstrap-vue because the markup elements are different. So, given my markup below, how can I achieve the collapse state arrow?
<div>
<b-btn v-b-toggle.collapse3 class="m-1">Toggle Collapse</b-btn>
<b-collapse visible id="collapse3">
<b-card> some content </b-card>
</b-collapse>
</div>
fitorec :
you can use a custom behavior when change the status with the event this.$root.$on check this doc:\n\nhttps://bootstrap-vue.org/docs/components/collapse#collapse\n\n\na simple example :)\n\n\r\n\r\nVue.use(BootstrapVue);\nnew Vue({\n el: '#app',\n data() {\n // collapsed has the status\n return { collapsed: false };\n },\n mounted() {\n // Emitted when collapse has\n // changed its state\n this.$root.$on(\n 'bv::collapse::state',\n // id of the collapse component\n // collapse is the state\n // true => open, false => close\n (id, collapsed) => {\n if (id === \"my-collapse\") {\n this.collapsed = collapsed;\n }\n });// $on\n },\n // plus\n computed: {\n btnVariant: function () {\n return this.collapsed?\n 'danger' : 'info'\n },\n btnTxt: function () {\n return this.collapsed?\n '🡇 Show ' : '🡅 Hide';\n }\n }\n});\r\n<!-- Required Stylesheets -->\n<link\n type=\"text/css\"\n rel=\"stylesheet\" href=\"https://unpkg.com/bootstrap/dist/css/bootstrap.min.css\"\n/>\n<link\n type=\"text/css\"\n rel=\"stylesheet\"\n href=\"https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css\"\n/>\n\n<!-- Required scripts -->\n<script src=\"https://unpkg.com/vue\"></script>\n<script src=\"https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js\"></script>\n\n\n<!-- markup template -->\n<div id=\"app\">\n <b-button\n v-b-toggle:my-collapse\n :variant=\"btnVariant\">\n {{ btnTxt }} - Collapse\n </b-button>\n <b-collapse id=\"my-collapse\">\n Lorem ipsum dolor sit amet...\n </b-collapse>\n</div>",
2020-08-28T12:15:39
fralla :
This was my solution in the end, based on Riddhi's answer:\n\n<b-btn block href=\"#\" v-b-toggle.accordion1 variant=\"secondary\">\n Time Period\n <span class=\"when-opened\">\n <font-awesome-icon icon=\"chevron-down\" />\n </span>\n <span class=\"when-closed\">\n <font-awesome-icon icon=\"chevron-right\" />\n </span>\n</b-btn>\n\n<b-collapse id=\"accordion1\" role=\"tabpanel\">\n <!-- some content -->\n</b-collapse>\n\n\nWith additional CSS:\n\n<style scoped>\n...\n .collapsed > .when-opened,\n :not(.collapsed) > .when-closed {\n display: none;\n }\n\n...\n</style>\n\n\nI 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: \n\nimport Vue from 'vue'\n...\nimport { library } from '@fortawesome/fontawesome-svg-core'\nimport { faChevronRight, faChevronDown } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'\n\nlibrary.add(faChevronRight, faChevronDown);\n\nVue.component('font-awesome-icon', FontAwesomeIcon);\n...\n",
2019-02-08T02:13:48
Riddhi :
Example HTML markup:\n\n <b-btn v-b-toggle.myCollapse>\n <span class=\"when-opened\">\n<i class=\"fa fa-chevron-down\" aria-hidden=\"true\"></i></span>\n <span class=\"when-closed\">\n <i class=\"fa fa-chevron-up\" aria-hidden=\"true\"></i></span>\n My Collapse\n </b-btn>\n <b-collapse id=\"myCollapse\">\n <!-- content here -->\n </b-collapse>\n\n\nExample Custom CSS:\n\n.collapsed > .when-opened,\n:not(.collapsed) > .when-closed {\n display: none;\n}\n\n\nYou can achieve this with the help of above css classes.",
2019-02-07T06:20:58