# Utilities & Helpers

# Transition Expand

# Introduction

The TransitionExpand component is a utility component to easily add a smooth height transition on a div that appears and disappears.

This is basically something you toggle to show & hide content.

# Example

<template>
  <div>
    <cp-button is-plain color="blue" @click="toggleContent">Toggle content</cp-button>
    <transition-expand>
      <p v-if="isToggled">Content toggled</p>
    </transition-expand>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isToggled: false,
    }
  },
  methods: {
    toggleContent() {
      this.isToggled = !this.isToggled
    },
  },
}
</script>