Display state in Bootstrap-vue Collapse with an arrow indicating visibility

Question

Display state in Bootstrap-vue Collapse with an arrow indicating visibility

I am currently using Bootstrap-vue and have implemented a simple collapse component to toggle the visibility of content. My goal now is to find a way to incorporate an arrow icon in the toggle button that can signify the state of the collapse: pointing down when the content is open, and pointing sideways when it is closed.

I came across a solution on Stack Overflow for Bootstrap 4, but I encountered challenges adapting it to Bootstrap-vue due to differences in the markup elements. With the given markup below, how can I go about adding 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>

css vue.js bootstrap-4 bootstrap-vue

Answer 1

Answer №1

After considering Riddhi's response, I came up with my final solution:

<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>

Furthermore, I applied additional CSS styling:

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

...
</style>

To complete the setup, I followed the instructions for installing and importing Font Awesome packages from this link and this link. In my main.js file, the import code looked 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);
...

Answer 2

After considering Riddhi's response, I came up with my final solution:

<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>

Furthermore, I applied additional CSS styling:

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

...
</style>

To complete the setup, I followed the instructions for installing and importing Font Awesome packages from this link and this link. In my main.js file, the import code looked 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);
...

Answer 3

Answer №2

Sample HTML code:

     <b-btn v-b-toggle.myDropdown>
          <span class="when-opened">
<i class="fa fa-angle-down" aria-hidden="true"></i></span>
          <span class="when-closed">
    <i class="fa fa-angle-up" aria-hidden="true"></i></span>
          My Dropdown
        </b-btn>
        <b-dropdown id="myDropdown">
          <!-- dropdown content goes here -->
        </b-dropdown>

Demo Custom CSS:

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

By utilizing the provided CSS classes, you can replicate this behavior in your project.

Answer 4

Sample HTML code:

     <b-btn v-b-toggle.myDropdown>
          <span class="when-opened">
<i class="fa fa-angle-down" aria-hidden="true"></i></span>
          <span class="when-closed">
    <i class="fa fa-angle-up" aria-hidden="true"></i></span>
          My Dropdown
        </b-btn>
        <b-dropdown id="myDropdown">
          <!-- dropdown content goes here -->
        </b-dropdown>

Demo Custom CSS:

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

By utilizing the provided CSS classes, you can replicate this behavior in your project.

Answer 5

Answer №3

When you want to customize the behavior of changing the status using the event this.$root.$on, take a look at this documentation:

Here's a simple example for you :)

Vue.use(BootstrapVue);
new Vue({
  el: '#app',
  data() {
      // collapsed holds the current status
      return { collapsed: false };
    },
    mounted() {
     // Triggered when collapse changes its state
     this.$root.$on(
      'bv::collapse::state',
       (id, collapsed) => {
        if (id === "my-collapse") {
          this.collapsed = collapsed;
        }
      });
    },
    computed: {
      btnVariant: function () {
        return this.collapsed?
          'danger' : 'info'
      },
      btnTxt:  function () {
        return this.collapsed?
           '🡇 Show ' : '🡅 Hide';
      }
    }
});

<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>


<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>

Best of luck! :)

Answer 6

When you want to customize the behavior of changing the status using the event this.$root.$on, take a look at this documentation:

Here's a simple example for you :)

Vue.use(BootstrapVue);
new Vue({
  el: '#app',
  data() {
      // collapsed holds the current status
      return { collapsed: false };
    },
    mounted() {
     // Triggered when collapse changes its state
     this.$root.$on(
      'bv::collapse::state',
       (id, collapsed) => {
        if (id === "my-collapse") {
          this.collapsed = collapsed;
        }
      });
    },
    computed: {
      btnVariant: function () {
        return this.collapsed?
          'danger' : 'info'
      },
      btnTxt:  function () {
        return this.collapsed?
           '🡇 Show ' : '🡅 Hide';
      }
    }
});

<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>


<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>

Best of luck! :)

Answer 7

Answer №4

An even more seamless solution would be to simply utilize v-model instead of relying on CSS for determining the UI state.

<b-collapse v-model="openState" id="collapse3">
  <b-card> some content </b-card>
</b-collapse>

This change will result in:

<b-collapse v-model="openState" id="collapse3">
  <b-card> some content </b-card>
</b-collapse>

You can choose to initialize openState as true within the data section or define its value in the mounted or created lifecycle hooks, potentially based on a prop (as done in my case). As soon as the user begins interacting, the value will stay in sync with the UI state.

The arrow functionality can then be achieved using:

<span class="fa" :class="openState ? 'fa-chevron-down' : 'fa-chevron-up'"></span>

or

<font-awesome-icon :icon="openState ? 'chevron-down' : 'chevron-up'" />

Answer 8

An even more seamless solution would be to simply utilize v-model instead of relying on CSS for determining the UI state.

<b-collapse v-model="openState" id="collapse3">
  <b-card> some content </b-card>
</b-collapse>

This change will result in:

<b-collapse v-model="openState" id="collapse3">
  <b-card> some content </b-card>
</b-collapse>

You can choose to initialize openState as true within the data section or define its value in the mounted or created lifecycle hooks, potentially based on a prop (as done in my case). As soon as the user begins interacting, the value will stay in sync with the UI state.

The arrow functionality can then be achieved using:

<span class="fa" :class="openState ? 'fa-chevron-down' : 'fa-chevron-up'"></span>

or

<font-awesome-icon :icon="openState ? 'chevron-down' : 'chevron-up'" />

Display state in Bootstrap-vue Collapse with an arrow indicating visibility

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Implementing CSS counter-increment with jQuery

Error message indicating a duplicated navigation issue occurred following the receipt of an authorization code from Stripe

Bootstrap dropdown feature automatically rearranges all items in my navigation bar

Display flex causing Mui LinearProgress Bar to disappear

Designing a horizontal slide banner with enhanced functionality

Modify current HTML code for 1027x768 displays

tips for arranging the body of a card deck

Steps to reverting CSS attributes back to their default values for a specified element (or blocking inheritance)

Ways to display a sorting icon depending on a calculated attribute

Excessive content within div

I am attempting to create a captivating image for a "jumbotron"

Incorporate a bootstrap tooltip into the search functionality of a datatable

Steps to automatically redirect to the login page when a user is not authenticated in a Vue 3 frontend with Laravel as the backend

Vue.js is throwing an error stating that a component template must have only one main element

Make google maps InfoWindow wider than 700px

Transferring information between Rails views and Vue.js

Obtaining the CSS class assigned to a specific WebElement

A step-by-step guide to building an API page with Python

Tips for adjusting the color of a linear gradient in a shimmer effect

Unusual occurrences when using absolute positioning, style.top, style.left, and the HTML "a" tag