Toggle the visibility of content across your project with a few classes and attributes.
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.
Click the buttons below to show and hide another element.
.collapse
hides content.collapse.show
is applied during transitions.collapsing
show contentGenerally, 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.
<template>
<p>
<b-button
margin="e-2"
button="primary"
toggle="collapse"
href="#collapseExample"
>
Link with href
</b-button>
<b-button
button="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>
The collapse plugin also supports horizontal collapsing.
<template>
<p>
<b-button
button="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>
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
<template>
<p>
<b-button
button="primary"
toggle="collapse"
target="#multiCollapseExample1"
>
Toggle first element
</b-button>
<b-button
button="primary"
toggle="collapse"
target="#multiCollapseExample2"
>
Toggle second element
</b-button>
<b-button
button="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>
Method | Description |
---|---|
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 |
<template>
<b-button type="button" button="primary" @click="showCollapse">
Show
</b-button>
<b-button type="button" button="primary" @click="hideCollapse">
Hide
</b-button>
<b-button type="button" button="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>