Nested accordions do not expand properly

[peterneely]

When an accordion is nested inside another, the child accordion does not expand the height of its parent.

You can see the issue in this plunkr: http://plnkr.co/edit/Vv0DWehGhyi6eYkQCqvN?p=preview. It works correctly in ui-bootstrap version 0.12.1, but if you change the version to anything higher (including 0.14.0), it breaks.

This is how it looks in version 0.12.1 (correct):

This is how it looks in any version after 0.12.1 (broken):

[icfantv]

I'm not convinced this is a bug in UI Bootstrap (but certainly needs more investigation) because if you expand the inner accordion and then collapse and then expand the outer one, it does what you desire.

Also, just a head's up - that plunker is using Angular 1.2.x and as of 0.13.0, Angular UI Bootstrap requires Angular 1.3.x. That said, I confirmed this is still happening in Angular 1.4.6, Angular UI Bootstrap 0.14.0, and Bootstrap 3.3.5.

[peterneely]

Sorry, I'm using Angular 1.4.6 in another project and the accordion still exhibits the same behavior for the same versions.

To me, having to click on the inner one and then again on the outer one only confirms that there is a problem. That's not needed on ui-bootstrap 0.12.1.

Thanks for investigating.

[icfantv]

Sorry if I wasn't clear, I did confirm it is still happening with the latest versions of all the libraries/frameworks involved. I agree that it's a nuisance and a "feature" that was introduced somewhere...

[kuldeepkeshwar]

@peterneely
I also have use-case for the nested accordion in our application and faced the same problem , finally ended up writing a new accordion.
may be this http://kuldeepkeshwar.github.io/ui-accordion/ can solve your problem

@icfantv
I want to add callback(async) handlers for before opening or closing accordion panels.

[mtraynham]

I encountered a similar issue. After adding angular-animate to the page it started to work.

I think it's related to the collapse directive, not triggering this done call:
https://github.com/angular-ui/bootstrap/blob/master/src/collapse/collapse.js#L18

Which is kind of strange since if ($animateCss) shouldn't be truthy? (Angular 1.4.7)

[icfantv]

Hmmmm. That was added as a workaround when Angular 1.4.5 came out and hoarked all the animations. I still need to investigate this. We have a release coming up at work and I'm a bit preoccupied with that. If someone wants to investigate more and potentially submit a PR with tests, that would be awesome.

@kuldeepkeshwar, I could see a use case for a select similar to tabs. We do need to be very careful on adding too many configuration options as it can become too unwieldy for people to use.