Vuetify expansion panels

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