Bootstrap collapse and ui-router

Question

I have a problem with ui-routerand using resetting bootstrap.

<div class="panel panel-default" id="accordion" >
    <div role="tab" id="headingOne">
       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
            Click me
        </a>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
            Data
    </div>
</div>

This is the page localhost/#/root/mypage/. Therefore, "Click me" is indicated on localhost:\#collapseOne, which leads me to the default page of my site.

Answer 1

You can simply fix the problem using an attribute data-target(will do the same job) instead of using an attribute hrefthat affects routing

Markup

<div class="panel panel-default" id="accordion" >
    <div role="tab" id="headingOne">
       <a role="button" href="javascript:;" data-toggle="collapse" data-parent="#accordion" 
          data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
            Click me
        </a>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel"
     aria-labelledby="headingOne">
        Data
    </div>
</div>