how to disable the second and third panels

[digish777]

HI,

My situation is like, i have three panels in the accordion, the first panel button triggers the second panel to open and the button inside the second panel triggers third panel to open. i do not want user to open the panel by clicking the plus icon in the right.

Thanks in advance.

[tanmaydesai89]

Hi @digish777

I am working on same situation. What solutions have you tried so far? I was thinking of preventing default event on click. But $event.preventDefault() not working out for me.

[digish777]

i gave ng-show property to the v-pane and made sure that, v-pane which is only needed is shown to the user. rest i hided it .

[digish777]

$scope.showQuestionAccoridon = { ok: false }

[LukaszWatroba]

Hello!

Now you can disable default click event by adding inactive attribute on v-pane-header element:

<v-accordion>
  <v-pane ng-repeat="pane in panes">
    <v-pane-header inactive>
      {{ ::pane.header }}
      <!-- Your custom toggle button -->
      <button ng-click="$pane.toggle()">Toggle me</button>
    </v-pane-header>

    <v-pane-content>
      {{ ::pane.content }}
    </v-pane-content>
  </v-pane>
</v-accordion>

You can also toggle the pane by id, like so:

<v-accordion multiple control="accordion">

  <v-pane id="{{ pane.id }}" ng-repeat="pane in panes">
    <v-pane-header>
      {{ ::pane.header }}
    </v-pane-header>

    <v-pane-content>
      {{ ::pane.content }}
    </v-pane-content>
  </v-pane>

</v-accordion>

<button ng-click="accordion.toggle(panes[0].id)">Toggle first pane</button>

But first, please download the latest release and... Sorry for the late reply guys!

[Xenovore]

Is there a way to dynamically set "inactive" on a header? It seems to work fine if I use it like in your example above, but it doesn't work if I try something like:
<v-pane-header inactive="canTogglePane">