Collapse ​

<BButton v-b-toggle.collapse-1 variant="primary">Toggle Collapse</BButton>

<BCollapse id="collapse-1">
  <BCard class="mt-4">
    <p class="card-text">Collapse contents Here</p>
    <BButton v-b-toggle.collapse-1-inner size="sm">Toggle Inner Collapse</BButton>
    <BCollapse id="collapse-1-inner">
      <BCard class="mt-4">Hello!</BCard>
    </BCollapse>
  </BCard>
</BCollapse>

Usage ​

Other elements can easily toggle BCollapse components using the v-b-toggle directive.

<!-- Using modifiers -->
<BButton v-b-toggle.collapse-2 class="m-1">Toggle Collapse</BButton>

<!-- Using value -->
<BButton v-b-toggle="'collapse-2'" class="m-1">Toggle Collapse</BButton>

<!-- Element to collapse -->
<BCollapse id="collapse-2">
  <BCard class="mt-4">I am collapsible content!</BCard>
</BCollapse>

Initial visibility (start expanded) ​

To make the BCollapse show initially, set the v-model prop:

<!-- Using modifiers -->
<BButton v-b-toggle.collapse-3 class="m-1">Toggle Collapse</BButton>

<BCollapse id="collapse-3" visible>
  <BCard class="mt-4">I should start open!</BCard>
</BCollapse>

v-model support ​

The component's collapsed (visible) state can also be set with v-model which binds internally to the visible prop.

Note, when using v-model to control BCollapse, the aria-* attributes and class collapsed are not automatically placed on the trigger button (as is the case when using the v-b-toggle directive). In this example we must control the attributes ourselves for proper accessibility support.

By default, an initially visible collapse will not animate on mount. To enable the collapse expanding animation on mount, set the initial-animation prop on <BCollapse> and leave the visible prop as false.

<template>
  <BCard>
    <BButton
      :class="visible ? null : 'collapsed'"
      :aria-expanded="visible ? 'true' : 'false'"
      aria-controls="collapse-4"
      @click="visible = !visible"
    >
      Toggle Collapse
    </BButton>
    <BCollapse id="collapse-4" v-model="visible" class="mt-2">
      <BCard>I should start open!</BCard>
    </BCollapse>
  </BCard>
</template>

<script setup lang="ts">
import {ref} from 'vue'
const visible = ref(true)
</script>

Trigger multiple collapse elements ​

You can even collapse multiple BCollapse components via a single v-b-toggle by providing multiple target Ids using modifiers.

You can also pass multiple target Ids via the directive value in BootstrapVueNext.

<div class="d-flex gap-2">
  <!-- Via multiple directive modifiers -->
  <BButton v-b-toggle.collapse-a.collapse-b>Toggle Collapse A and B</BButton>
  <!-- Via space separated string of Ids passed to directive value -->
  <BButton v-b-toggle="'collapse-a collapse-b'">Toggle Collapse A and B</BButton>
  <!-- Via array of string Ids passed to directive value -->
  <BButton v-b-toggle="['collapse-a', 'collapse-b']">Toggle Collapse A and B</BButton>
</div>
<!-- Elements to collapse -->
<BCollapse id="collapse-a">
  <BCard class="mt-4">I am collapsible content A!</BCard>
</BCollapse>
<BCollapse id="collapse-b">
  <BCard class="mt-4">I am collapsible content B!</BCard>
</BCollapse>

Slots ​

The header and footer slots can be used to create custom toggles for your collapsible content. The default slot is used for the content to be hidden or shown.

Using the v-b-toggle directive to toggle the BCollapse will still work but the collapsed CSS class will no longer be applied to the element with the directive.

The following properties are available for the header and footer and default slots:

BCollapse also provides the above variables to its children as well as the value of the isNav prop.

<BCollapse id="my-collapse">
  <template #header="{visible, toggle, id}">
    <BButton variant="primary" :aria-expanded="visible" :aria-controls="id" @click="toggle">
      <span>{{ visible ? 'Close' : 'Open' }}</span> My Collapse
    </BButton>
  </template>
  <!-- Content here -->
  <div class="mt-2">This is data that is being collapsed</div>
</BCollapse>

Exposed functions ​

BCollapse exposes several functions and properties that allow manipulation and examination of the state of the components. These are accessed through the template ref

• hide: Hides the collapse and fires the hide event
• show: Shows the collapse and fires the show event
• toggle: Toggles the collapse and fires the hide or show event, as appropriate
• isNav: The value of the isNav prop of the collapse
• visible: The visible state of the collapse

    isNav = 
    visible = 
  

<template>
  <BButtonGroup>
    <BButton @click="show">show</BButton>
    <BButton @click="hide">hide</BButton>
    <BButton @click="toggle">toggle</BButton>
  </BButtonGroup>
  <BCollapse ref="myCollapse" class="mt-2">
    <BCard>I am controlled by exposed functions!</BCard>
  </BCollapse>
  <pre class="mt-2">
    isNav = {{ myCollapse?.isNav }}
    visible = {{ myCollapse?.visible }}
  </pre>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import type {BCollapse} from 'bootstrap-vue-next'
const myCollapse = ref<InstanceType<typeof BCollapse> | null>(null)
const show = () => myCollapse.value?.show()
const hide = () => myCollapse.value?.hide()
const toggle = () => myCollapse.value?.toggle()
</script>

Accessibility ​

The v-b-toggle directive will automatically add the ARIA attributes aria-controls and aria-expanded to the component that the directive appears on (as well as add the class collapsed when not expanded). aria-expanded will reflect the state of the target BCollapse component, while aria-controls will be set to the Id(s) of the target BCollapse component(s).

If using v-model to set the visible state instead of the directive v-b-toggle, you will be required to, on the toggle element, add the aria-controls and other appropriate attributes and classes yourself.

While the v-b-toggle directive can be placed on almost any HTML element or Vue component, it is recommended to use a button or link (or similar component) to act as your toggler; otherwise your trigger elements may be inaccessible to keyboard or screen reader users. If you do place them on something other than a button or link (or similar component), you should add the attributes tabindex="0" and role="button" to allow users of assistive technology to reach your trigger element.