How to expand/collapse column in vue js - vue.js

Question

I am working with vue.js with vuetify framework, i am trying to show/hide column. How can i do that with vue. In Vuetify documentation , there is only expand/collapse for row like this
enter image description here
export default {
data: () => ({
singleExpand: false,
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
sodium: 87,
calcium: '14%',
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
sodium: 129,
calcium: '8%',
iron: '1%',
},
],
}),
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<v-container fluid>
<v-switch v-model="singleExpand"
label="Expand Single Item"></v-switch>
<v-data-iterator :items="desserts"
item-key="name"
:items-per-page="4"
:single-expand="singleExpand"
hide-default-footer>
<template v-slot:default="{ items, isExpanded, expand }">
<v-row>
<v-col v-for="item in items"
:key="item.name"
cols="12"
sm="6"
md="4"
lg="3">
<v-card>
<v-card-title>
<h4>{{ item.name }}</h4>
</v-card-title>
<v-switch :input-value="isExpanded(item)"
:label="isExpanded(item) ? 'Expanded' : 'Closed'"
class="pl-4 mt-0"
#change="(v) => expand(item, v)"></v-switch>
<v-divider></v-divider>
<v-list v-if="isExpanded(item)"
dense>
<v-list-item>
<v-list-item-content>Calories:</v-list-item-content>
<v-list-item-content class="align-end">
{{ item.calories }}
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>Fat:</v-list-item-content>
<v-list-item-content class="align-end">
{{ item.fat }}
</v-list-item-content>
</v-list-item>
</v-list>
</v-card>
</v-col>
</v-row>
</template>
</v-data-iterator>
</v-container>
</template>
I want to make a dynamic column that can expand/collapse. here is what i expected to do. i really dont know how to make it, can i make it with vuetify or have to do with vue native.
enter image description here