Control the expand and collapse of an acordion

[Adrian Ferreres]

Hello:

I am trying to understand how works the ui.bootstrap accordion in angularjs. In my case of use, I have three accordions of which only the first is allowed to open. The rest of them should not open when the user click on their header until an option is selected from the previous accordion.

Now, I am experimenting with a controller which shows a error message when the user click on the second and third accordeon and, after that, it close them. This is my Plunker with my code:

http://plnkr.co/edit/rSg6Az?p=preview

The part of the error message works fine but I can not get that the accordeon selected is closed when I click it.

Any idea?

Regards:

Adrian Ferreres

[Vanya Dineva]

Here's a couple of things you can try:

1. Notice the accordionGroup directive uses the collapse directive in its template (https://github.com/angular-ui/bootstrap/blob/master/template/accordion/accordion-group.html )

You can modify and instead of having collapse="!isOpen" you can replace the isOpen with a new variable that you would set to false until your condition is met

2. Notice the ng-click="toggleOpen()" in the accordion group template (https://github.com/angular-ui/bootstrap/blob/master/template/accordion/accordion-group.html ). Try creating a custom function e.g. ng-click="openIfConditionMet()" and put your logic inside the function

[Adrian Ferreres]

Hello Vanya:

First I give you the thanks for your email and my apologies for my delay to answer it. I tried your solution and it worked, however I found other way to solve the problem without modify the template of accordion component. I only had to add a modal window with the error message and change the value of open attribute when the modal window is closed.

Here is the plunker with my example:

http://plnkr.co/edit/rSg6Az?p=preview

Regards:

2014-01-25 Vanya Dineva <vanya.f...@gmail.com>

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/LoKgc4Kg5ic/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.