Collapse
Easily toggle visibility of almost any content on your pages in a vertically collapsing container. Includes support for making accordions. Visibility can be easily toggled with our v-b-toggle directive, or via v-model.
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<Button @click="collapse1=!collapse1">Toggle Collapse</Button>
<Collapse v-model="collapse1">
<div class="border p-3">
Some placeholder content for the collapse component.
This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</Collapse>
<script>
import {ref} from "vue";
export default {
setup(props) {
return {
collapse1: ref(false)
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Horizontal
The collapse plugin also supports horizontal collapsing. Add the prop horizontal to transition the width instead of height and set a width on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our width utilitiesopen in new window.
Note: Working on it. Needs improvements.
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
Initial visibility (start expanded)
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.