Close child accordion content when click another parent accordion header.

[shaohaolin]

I have 2 levels accordions. I want to collapse the level 2 content when I click level 1 accordion header.

Is it a way I can do that ? Thank you.

Basically, what I mean is:

When I click Pane 2, the content of SubPane 1 will collapse.

[LukaszWatroba]

Hey.

Hmm, I'm not 100% sure, but something like this should do the trick:

<v-accordion multiple control="myAccordion" onexpand="expandCb(index, id)">
  <v-pane id="myPane1">
    <v-pane-header>
      First pane header
    </v-pane-header>

    <v-pane-content>
      First pane content
    </v-pane-content>
  </v-pane>

  <v-pane id="myPane2">
    <v-pane-header>
      Second pane header
    </v-pane-header>

    <v-pane-content>
      Second pane content

      <v-accordion multiple control="mySubAccordion">
        <v-pane id="mySubPane1">
          <v-pane-header>
            First subpane header
          </v-pane-header>

          <v-pane-content>
            First subpane content
          </v-pane-content>
        </v-pane>
      </v-accordion>
    </v-pane-content>
  </v-pane>
</v-accordion>

myApp.controller('myAccordionController', function ($scope) {
  $scope.expandCb = function (index, id) {
    if (id === 'pane1') {
      $scope.mySubAccordion.collapse('mySubPane1');
    }
  };
});

You need to download the latest release first. If you are still interested of course. Sorry for the late reply!

[shaohaolin]

@LukaszWatroba Thanks for the reply. I found a way to walk around :)