Bootstrap 3 accordion menu: Stop the panel open from also opening the page

Question

I am developing an Angular JS 1.5 app using Booststrap components. I have an accordion menu on the sidebar which is based upon this:

http://bootsnipp.com/snippets/QXqM1 (Not my code)

When I open a menu and select the menu item the page is loaded (I am using vanilla angular JS routing for this.

If I then open another menu from the accordion ie click on the menu header, the menu opens, the previous one collapses but the loaded page changes.

What I would like is for a page to be loaded only when an item is clicked and not when a menu is opened.

Is this and angular issue or a css or bootstrap issue and how can I solve it?

Thanks in advance for any help or pointers on this.

Answer 1

Well thanks for the overwhelming response ;-)

I found a solution: Instead of using href for the sub menu titles I now use data-target. Bootstrap interprets data-target and this way Angular JS routing does not get invoked.

In this way the menus can be opened and closed without impact the view. the href tags remain only on the menu items which should show anything.