Expansion panel with sub exponsion panels declaration-CodePudding

I couldn't find any clarification about this but I'm trying to understand of concept that using v-expension-panels component. Do I need to declare parent component of expansion panel that has v-expension-panels child as v-expension-panels or v-expension-panel would be enough? Is v-expension-panels's all point is controlling multiple panel or must be declared if has child of multiple panels. If I have to give example:

<v-expansion-panels > <---------- Is this must be v-expansion-panels or v-expansion-panel component would be enough also?
    <v-expansion-panel>
        <v-expansion-panel-header expand-icon="mdi-menu-down">
            Item
        </v-expansion-panel-header>
        <v-expansion-panel-content>
            <v-expansion-panels >
                <v-expansion-panel
                v-for="(item,i) in 5"
                :key="i"
                >
                    <v-expansion-panel-header expand-icon="mdi-menu-down">
                        Item
                    </v-expansion-panel-header>
                    <v-expansion-panel-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-expansion-panel-content>
                </v-expansion-panel>
            </v-expansion-panels>
        </v-expansion-panel-content>
    </v-expansion-panel> </v-expansion-panels>

Edit: I have more simple way to explain my question now, LMAO. Can v-expansion-panel component has multiple child panels? Or parent of those panels MUST be v-expansion-panels?

CodePudding user response：

<v-expansion-panels> is always the parent component to <v-expansion-panel>. The <v-expansion-panel> cannot be properly rendered without the <v-expansion-panels> parent (demo 1).

If you want to nest multiple <v-expansion-panel>s, they'd have to be in their own <v-expansion-panels> parent:

<v-expansion-panels>
  <v-expansion-panel>
    <v-expansion-panel-content>

      <!-- NESTED PANELS -->
      <v-expansion-panels>
        <v-expansion-panel>
          <v-expansion-panel-content>I'm a nested panel</v-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>

    </v-expansion-panel-content>
  </v-expansion-panel>
</v-expansion-panels>

demo 2