title: Bootstrap accordion: how to avoid page scroll when collapse or expand elements
body: <p>I have unexpected page scrolling when try to collapse or expand elements of the accordion. Maybe I just doing something wrong with bootstrap grid system? Here is example of page:  </p>
  
  <p>How can I avoid this irritative effect?<br>
  jsfiddle available <a href="https://jsfiddle.net/Lfwvtyms/1/">https://jsfiddle.net/Lfwvtyms/1/</a>  </p>
  
  <pre><code>&lt;body&gt;
  &lt;!--default navbar here--&gt;
  &lt;main&gt;
      &lt;h1&gt;Long long long long long long header header header header header header lng lasd lewq j&lt;/h1&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-xs-12"&gt;
                  &lt;div id="task-list"&gt;
                      &lt;div id="accordion" role="tablist" aria-multiselectable="true" class="panel-group"&gt;
  
                          &lt;div class="panel panel-default"&gt;
                              &lt;div id="headingOne" role="tab" class="panel-heading"&gt;&lt;h4 class="panel-title"&gt;&lt;a
                                      data-toggle="collapse" data-target="#collapseOne" href="#collapseOne"
                                      aria-expanded="true" aria-controls="collapseOne"&gt;First list&lt;/a&gt;&lt;/h4&gt;&lt;/div&gt;
                              &lt;div id="collapseOne" role="tabpanel" aria-labelledby="headingOne"
                                   class="panel-collapse collapse in"&gt;
                                  &lt;ul class="list-group"&gt;
                                      &lt;li class="list-group-item"&gt;Item1&lt;/li&gt;
                                      &lt;li class="list-group-item"&gt;Item2&lt;/li&gt;
                                      &lt;li class="list-group-item"&gt;Item3&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="panel panel-default"&gt;
                              &lt;div id="headingTwo" role="tab" class="panel-heading"&gt;&lt;h4 class="panel-title"&gt;&lt;a
                                      data-toggle="collapse" data-target="#collapseTwo" href="#collapseTwo"
                                      aria-expanded="true" aria-controls="collapseTwo"&gt;Another list&lt;/a&gt;&lt;/h4&gt;&lt;/div&gt;
                              &lt;div id="collapseTwo" role="tabpanel" aria-labelledby="headingTwo"
                                   class="panel-collapse collapse in"&gt;
                                  &lt;ul class="list-group"&gt;
                                      &lt;li class="list-group-item"&gt;Item1&lt;/li&gt;
                                      &lt;li class="list-group-item"&gt;Item2&lt;/li&gt;
                                      &lt;li class="list-group-item"&gt;Item3&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div id="someDiv"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-xs-12"&gt;
                              &lt;div id="dummy"&gt;Div with fixed height here&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/main&gt;
  &lt;footer class="container-fluid"&gt;my footer here&lt;/footer&gt;
  &lt;/body&gt;
  </code></pre>