Collapse

Toggle the visibility of content across your project with a few classes and attributes.

How it works

The collapse JavaScript plugin is used to show and hide content.

Buttons or anchors are used as triggers that are mapped to specific elements you toggle.

Collapsing an element will animate the height from its current value to 0.

Given how CSS handles animations, you cannot use padding attribute on a collapse attribute.

Instead, use the class as an independent wrapping element.

Example

Click the buttons below to show and hide another element.

  • .collapse hides content
  • .collapse.show is applied during transitions
  • .collapsing show content

Generally, we recommend using a button with the target attribute.

While not recommended from a semantic point of view, you can also use a link with the href attribute (and a role="button").

In both cases, the toggle="collapse" attribute is required.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
vue
<template>
 <p>
  <b-button
   margin="e-2"
   color="primary"
   toggle="collapse"
   href="#collapseExample"
  >
   Link with href
  </b-button>
  <b-button
   color="primary"
   toggle="collapse"
   target="#collapseExample"
  >
   Button with target
  </b-button>
 </p>
 <Collapse id="collapseExample">
  <Card>
   <CardBody>
    Some placeholder content for the collapse component. This panel is
    hidden by default but revealed when the user activates the relevant
    trigger.
   </CardBody>
  </Card>
 </Collapse>
</template>

Horizontal

The collapse plugin also supports horizontal collapsing.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
vue
<template>
 <p>
  <b-button
   color="primary"
   toggle="collapse"
   target="#collapseWidthExample"
  >
   Button with target
  </b-button>
 </p>
 <div style="min-height: 120px">
  <Collapse
   id="collapseWidthExample"
   horizontal
  >
   <Card>
    <CardBody style="width: 300px">
     This is some placeholder content for a horizontal collapse. It's
     hidden by default and shown when triggered.
    </CardBody>
   </Card>
  </Collapse>
 </div>
</template>

Multiple targets

A <Button> or <b-a> can show and hide multiple elements by referencing them with a selector in its href or target attribute.

Multiple <Button> or <b-a> can show and hide an element if they each reference it with their href or target attribute

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
vue
<template>
 <p>
  <b-button
   color="primary"
   toggle="collapse"
   target="#multiCollapseExample1"
  >
   Toggle first element
  </b-button>
  <b-button
   color="primary"
   toggle="collapse"
   target="#multiCollapseExample2"
  >
   Toggle second element
  </b-button>
  <b-button
   color="primary"
   toggle="collapse"
   target=".multi-collapse"
  >
   Toggle both elements
  </b-button>
 </p>
 <Row>
  <Col>
   <Collapse
    id="multiCollapseExample1"
    class="multi-collapse"
   >
    <Card>
     <CardBody>
      Some placeholder content for the first collapse component of this
      multi-collapse example. This panel is hidden by default but revealed
      when the user activates the relevant trigger.
     </CardBody>
    </Card>
   </Collapse>
  </Col>
  <Col>
   <Collapse
    id="multiCollapseExample2"
    class="multi-collapse"
   >
    <Card>
     <CardBody>
      Some placeholder content for the second collapse component of this
      multi-collapse example. This panel is hidden by default but revealed
      when the user activates the relevant trigger.
     </CardBody>
    </Card>
   </Collapse>
  </Col>
 </Row>
</template>

Methods

MethodDescription
toggle Toggles a collapsible element to shown or hidden. Returns to the caller before the collapsible element has actually been shown or hidden
show Shows a collapsible element. Returns to the caller before the collapsible element has actually been shown
hide Hides a collapsible element. Returns to the caller before the collapsible element has actually been hidden

demo

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
vue
<template>
 <b-button
  type="button"
  color="primary"
  @click="showCollapse"
 >
  Show
 </b-button>
 <b-button
  type="button"
  color="primary"
  @click="hideCollapse"
 >
  Hide
 </b-button>
 <b-button
  type="button"
  color="primary"
  @click="toggleCollapse"
 >
  Toggle
 </b-button>
 <Collapse ref="demoCollapse">
  <Card>
   <CardBody>
    Some placeholder content for the collapse component. This panel is
    hidden by default but revealed when the user activates the relevant
    trigger.
   </CardBody>
  </Card>
 </Collapse>
</template>

<script setup lang="ts">
const demoCollapse = ref(null);
const showCollapse = () => {
 if (demoCollapse.value) {
  demoCollapse.value.show();
 }
};
const hideCollapse = () => {
 if (demoCollapse.value) {
  demoCollapse.value.hide();
 }
};
const toggleCollapse = () => {
 if (demoCollapse.value) {
  demoCollapse.value.toggle();
 }
};
</script>