# Expand

Toggle visibility of any content in a vertically collapsing container.

# Basic example

For basic <bdn-expand> usage, you just need to provide a title prop, and a content in a default slot.

# Using v-model

If you have a case where you need to expand the content without user clicking on the title of <bdn-expand> component, or you want to set it as opened on the page load, you can use v-model to tell if content should be shown.

v-model value: true

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dapibus felis. Vestibulum lobortis purus a magna semper aliquet. Maecenas tincidunt pharetra enim in venenatis. Proin leo mauris, tempor ac ipsum eu, fringilla varius eros. Sed vitae turpis eu nibh tincidunt lobortis sed quis quam. Vivamus non faucibus lorem. Vivamus porttitor sem eu enim dapibus egestas. Nam rutrum ex vel velit efficitur scelerisque. Etiam porttitor ipsum dui, non vestibulum diam scelerisque a. Aliquam tellus lectus, consectetur nec enim vel, scelerisque gravida ligula. In vitae dignissim odio

# Grouped expand

If you have several expand sections that you want to display as a group, you can use <bdn-expand-group> component as a wrapper for individual <bdn-expand> components.

In this case, it's important to provide unique name prop to each of the <bdn-expand> components inside the group.

# Group with v-model

Similar to v-model on individual <bdn-expand> components, you can use this approach for expand groups.

Instead of assigning v-model to every expand component, you would only add one to the group component. This value should be an array of names of the individual expand components inside group.

v-model value: []

# Accordion

By using accordion prop on the <bdn-expand-group> component, you can have only one expand opened at a time. v-model is not necessary for this, but it works with it too. In this case, value would not be an array, but a string with a name of expand component.

Once again, you need to provide unique name for each of the <bdn-expand> components.

# Accordion with v-model

In case you want some expand element to be opened by default, use v-model on the bdn-expand-group component.

Model value: Lorem

# Custom title

Instead of setting title through prop, you can provide your own custom title in title slot for <bdn-expand> component.

# Customization

You can use these SCSS variables to customize the look of <bdn-expand> and <bdn-expand-group> components.

$expand-border: 1px solid $border !default;
$expand-header-border: 1px solid $border-alt !default;
$expand-border-radius: $default-radius !default;
$expand-caret-color: $text !default;
$expand-background: $base !default;

# Expand transition

In case you only need the vertical expand transition, you can use the same transition component that <bdn-expand> is using under the hood.

The important thing to remember is that the content in default slot of this transition component must be toggled with v-if directive.

# Props reference

# `<bdn-expand>`

Property	Type	Default	Accepts	Description
`title`	String	empty	Any string	A title for expand component
`name`	String	empty	Any string	A unique name of the expand component, used when the component is in the `bdn-expand-group` component

# `<bdn-expand-group>`

Property	Type	Default	Accepts	Description
`accordion`	Boolean	false	`true` or `false`	Controls if only one of the expand components should be opened inside group

# Slots reference

Slot	Description
default	The main content in the expand component
title	Used to add customized content in expand title area

# Events reference

Currently, these components do not emit any events. You can use watchers on v-model values to detect the state of expand component.

← Divider Progress bar →