CODEWITHSUNDEEP
angular-ui-bootstrap
Prashant
Prashant

Reputation: 4023

How to create a nested UI-Bootstrap accordion?

How to create a nested UI-Bootstrap accordion where inner and outer accordions works independent of each other.

If one accordion group is open in outer accordion and I am doing something in inner accordion, it shouldn't affect the state of outer accordion. Below is the sample code for what I want to achieve.

(What is happening right now is, if I open a group in inner accordion, it is closing the parent outer accordion group)

  <uib-accordion close-others="oneAtATime">

  <uib-accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
    Below iss the inner accordion
    <uib-accordion close-others="oneAtATime">
      <uib-accordion-group heading="Static Header, inner accordion" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
        This content is straight in the template.
      </uib-accordion-group>
      <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">
        {{group.content}}
      </uib-accordion-group>
      <uib-accordion-group heading="Dynamic Header inner accordion 1t">
        <p>The body of the uib-accordion group grows to fit the contents</p>
        <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
        <div ng-repeat="item in items">{{item}}</div>
      </uib-accordion-group>
    </uib-accordion>

  </uib-accordion-group>
  <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups1">
    {{group.content}}
  </uib-accordion-group>
</uib-accordion>

I have created a plunker here

Upvotes: 1

Views: 3793

Answers (1)

svarog
svarog

Reputation: 9847

Both you accordions share a model in is-open="status.isFirstOpen" (line 41 & 44 in your plunk), that means when that value changes, both accordions will have their drawers opened and closed at the same time

Change the inner accordion's is-open to some other model value like is-open="inner_status.isFirstOpen.

And just to be sure, make sure all accordions use different values for their properties, that will keep them properly decoupled.

Upvotes: 2

Related Questions