AngularJS with bootstrap 3 accordion not working when included via ng-view
Solution 1
The problem is that Bootstrap appends #according_name
within a a
tag. This triggers a AngularJS routing and due to route change test.html
is loaded again on every click on accordian link.
Your options are to try to configure $locationProvider
to use HTML5 mode with hashbag if it works
$locationProvider.html5Mode(true).hashPrefix('!');
See some documentation here
Other would be to use angular-ui component but it has been not ported to support version 3 of bootstrap.
Solution 2
Actually, there might be a simpler solution.
You can just make sure that the links don't propagate the URL change.
Add to the a
tag onclick="return false;"
Solution 3
You can empty the href=""
and use
data-target="#collapse"
instead, this worked for me
i.e
<a data-toggle="collapse" data-parent="#accordion" href=""
data-target="#collapse1">Collapsible Group 1</a>
Solution 4
I was having an issue using href and data-target together, so if you are using this in an application I'd recommend specifying one or the other but not both.
When I used both, I'd get redirected to my login page as soon as I clicked on it. With one or the other specified it worked fine, but not with both.
Related videos on Youtube
Stephan Grobler
Updated on September 15, 2022Comments
-
Stephan Grobler over 1 year
The problem is the following: As soon as I use the accordion in a view that is loaded in the ng-view directive, the accordion title clicks dont work correctly anymore
http://plnkr.co/edit/KGwuqDIb7I5NrYCtPOPk?p=preview
If the accordion is use in the page itself with no ng-view, the accordion works perfectly
http://plnkr.co/edit/8dY7JU1kxjZ2jAKmMIrP?p=preview
Any clue to what Im missing?
-
Stephan Grobler over 10 yearsHey, I changed the .html5Mode to false and now it works! thanks :)
-
pgarciacamou over 9 yearsThis worked for me. It might not be the best practice but I've been stuck with this for a few hours now. Thanks @mfloryan!
-
AskYous over 8 yearsYou just solved what I've been struggling on for hours. Thank you! Good catch.
-
Usman Khalid over 8 yearsThat's called solution. Thanks :)
-
Coded Container over 8 yearsLooks like the documentation that you added is no longer available. Could you add another link?
-
Chandermani over 8 years@CodedContainer please check now.
-
Andre Figueiredo almost 8 years+10 if a could. This should be the accepted answer! Non-intrusive in general app config as
html5Mode
and a good practice using the same attribute for others similar components -
Erich over 7 yearsAfter trying lots of things, this was the solution for me!
-
twknab about 7 years+1 This helped me a lot, I was getting weird behavior with my accordion even after switching into html5 mode (and rewriting my expressJS urls) -- adding
data-target
and emptying myhref
remedied all the odd accordion behavior -- thank you greatly!