---

title: CollapseHeight

---

# CollapseHeight

Renders a transition wrapping the element passed in the default slot and animating
it with a height animation.

## Props

| Name                | Description                                                                    | Type                 | Default           |
| ------------------- | ------------------------------------------------------------------------------ | -------------------- | ----------------- |
| <code>appear</code> | Indicates if the transition must be applied on the initial render of the node. | <code>boolean</code> | <code>true</code> |

## Slots

| Name                 | Description                                 | Bindings<br />(name - type - description) |
| -------------------- | ------------------------------------------- | ----------------------------------------- |
| <code>default</code> | (Required) to add content to the transition | None                                      |

## Examples

The CollapseHeight component is intended to be used as an animation to wrap an element with `v-if` or
`v-show` and animate its height. The animation scales its height from 0 to auto. This transition does not work with components that have vertical margin, padding, or border.

### Basic usage with `v-if`

```vue
<template>
  <CollapseHeight>
    <ComponentOrElement v-if="open" />
  </CollapseHeight>
</template>

<script setup>
import { ref } from "vue";
import CollapseHeight from "@empathyco/x-components/js/components/animations/collapse-height.vue";

const open = ref(false);
</script>
```

### Usage with `v-show`

```vue
<template>
  <CollapseHeight>
    <ComponentOrElement v-show="open" />
  </CollapseHeight>
</template>

<script setup>
import { ref } from "vue";
import CollapseHeight from "@empathyco/x-components/js/components/animations/collapse-height.vue";

const open = ref(true);
</script>
```

### Example with dynamic content

```vue
<template>
  <div>
    <button @click="open = !open">Toggle</button>
    <CollapseHeight>
      <div v-if="open" style="height: 200px; background: #eee;">
        Expanded content
      </div>
      <div v-else style="height: 50px; background: #ccc;">
        Collapsed content
      </div>
    </CollapseHeight>
  </div>
</template>

<script setup>
import { ref } from "vue";
import CollapseHeight from "@empathyco/x-components/js/components/animations/collapse-height.vue";

const open = ref(false);
</script>
```