Vuetify expansion panels - vue.js

Question

I am using vuetify and vuejs. I have 4 expansion panels that are aligned two columns and two rows. what i need is that when you click on one the rest 3 dissappear and the clicked one fill the entire container where they are located.
if you have a way of achieving this that isnt vuetify thats fine as well though id prefer vuetify
Html:
<div id="mainContent">
<v-app>
<v-container>
<v-layout row wrap>
<v-flex xs12 lg5 mb-3>
<v-expansion-panel popout>
<v-expansion-panel-content>
<div slot="header" v-on:click="isHidden = !isHidden">Title</div>
<v-card>
<v-card-text>
Content Goes here
</v-card-text>
</v-card>
</v-expansion-panel-content>
<v-expansion-panel-content>
<div slot="header" v-if="!isHidden">Title</div>
<v-card>
<v-card-text>
Content Goes here
</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-flex>
<v-flex xs12 lg5 mb-3>
<v-expansion-panel popout>
<v-expansion-panel-content>
<div slot="header">Title</div>
<v-card>
<v-card-text>
Content Goes here
</v-card-text>
</v-card>
</v-expansion-panel-content>
<v-expansion-panel-content>
<div slot="header">Title</div>
<v-card>
<v-card-text>
Content Goes here
</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
script is:
<script>
var mainContent = new Vue({
el: '#mainContent',
data: {
isHidden : false
}
})
</script>

Answer 1

The mistake you are making is using v-flex containers as rows. As per documentation this sets flex: 1 1 auto, so there will always be as many elements in your row as there are DOM elements in your v-flex. If you wrap each element with a v-flex, and you use methods and computed values, i'm sure your task is attainable. Heres a small codepen you can fine-tune to get the task accomplished