Bootstrap 3 collapsable only working with anchors - causing scroll

Question

I have a bootstrap 3 accordion

<dl class="panel-group col-lg-10 col-lg-offset-1" id="product-list">
  <dt class="panel-heading col-lg-12">
      <a data-toggle="collapse" data-parent="product-list" href="collapseOne">  
        <h3 class="panel-title">
          Heading Content
        </h3>
      </a>
  </dt>
  <dd id="collapseOne" class="product-details panel-collapse collapse col-lg-12">
        Collapsable Content
    </dd>
</dl>

This markup is working in that the accordion opens and closes properly. However, it is scrolling to the anchor point on open and close of the DD. This is not my desired behavior.

I have tried changing the anchor tags to divs, but that breaks my accordion. The different collapsables will only open if I put in an anchor to click.

Ooops. I copied markup that was halfway between the two i've tried. An A with href="" (which works but causes jumps) and a div with data-content that does not work at all. — Chris Sobolewski, May 12 '14 at 19:50

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

If you are using href tags with an anchor link, that's going to cause you to jump around to the top of the page causing the unwanted behavior. You need to disable JavaScript on the click

<a href="javascript:void(0)" id="loginlink">login</a>

See this article

Hope this is the correct answer.

edited May 23 '17 at 10:25

Community

1
1

answered May 12 '14 at 19:52

DivineChef

1,211
1
10
27

Bootstrap 3 collapsable only working with anchors - causing scroll

1 Answers1