Collapse
Toggle the visibility of content across your project with BootstrapVueNext's collapse.
Example
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.
<template>
<BCol>
<a class="btn btn-primary" v-b-toggle.collapseExample role="button">
Collapse with Link
</a>
<BButton v-b-toggle.collapseExample variant="primary">
Collapse with Button
</BButton>
<BCollapse id="collapseExample">
<BCard>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
anderson cred nesciunt sapiente ea proident.
</BCard>
</BCollapse>
</BCol>
</template>
Collapse with v-model
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.
<template>
<BCol>
<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>
Some placeholder content for the collapse component. This panel is hidden by
default but revealed when the user activates the relevant trigger.
</BCard>
</BCollapse>
</BCol>
</template>
<script setup>
const visible = ref(true)
</script>
Multiple targets
You can even collapse multiple BCollapse components via a single v-b-toggle by providing multiple target Ids using modifiers.
Collapsible Content A!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error facere eligendi rem quod enim architecto vel fuga voluptate dignissimos adipisci impedit maiores, veritatis laudantium aperiam possimus incidunt cupiditate culpa molestiae?Collapsible Content B!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error facere eligendi rem quod enim architecto vel fuga voluptate dignissimos adipisci impedit maiores, veritatis laudantium aperiam possimus incidunt cupiditate culpa molestiae?
<template>
<BButton variant="primary" v-b-toggle.collapse-a>Toggle Collapse A</BButton>
<BButton variant="primary" v-b-toggle.collapse-b>Toggle Collapse B</BButton>
<BButton variant="primary" v-b-toggle.collapse-a.collapse-b>
Toggle Collapse A and B
</BButton>
<!-- You can also use it like this -->
<!-- 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>
<BRow>
<BCol>
<BCollapse id="collapse-a">
<BCard title="Collapsible Content A!">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error facere
eligendi rem quod enim architecto vel fuga voluptate dignissimos adipisci
impedit maiores, veritatis laudantium aperiam possimus incidunt cupiditate
culpa molestiae?
</BCard>
</BCollapse>
</BCol>
<BCol>
<BCollapse id="collapse-b">
<BCard title="Collapsible Content B!">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error facere
eligendi rem quod enim architecto vel fuga voluptate dignissimos adipisci
impedit maiores, veritatis laudantium aperiam possimus incidunt cupiditate
culpa molestiae?
</BCard>
</BCollapse>
</BCol>
</BRow>
</template>