10

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?

4 Answers 4

40

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;"

3
  • This worked for me. It might not be the best practice but I've been stuck with this for a few hours now. Thanks @mfloryan! Dec 25, 2014 at 0:29
  • You just solved what I've been struggling on for hours. Thank you! Good catch.
    – AskYous
    Sep 12, 2015 at 14:56
  • That's called solution. Thanks :) Sep 16, 2015 at 15:45
15

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>
3
  • 4
    +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 May 26, 2016 at 16:44
  • After trying lots of things, this was the solution for me!
    – Erich
    Oct 10, 2016 at 20:36
  • +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 my href remedied all the odd accordion behavior -- thank you greatly!
    – twknab
    Mar 25, 2017 at 21:24
8

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.

3
  • 1
    Hey, I changed the .html5Mode to false and now it works! thanks :) Sep 14, 2013 at 20:14
  • Looks like the documentation that you added is no longer available. Could you add another link? Oct 14, 2015 at 13:51
  • @CodedContainer please check now. Oct 14, 2015 at 14:28
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.