javascript - page jumps on scrollbar show and hide -

i have sample code in jsfiddle. problem when click on heading 1 , opens panel. content long shows scrollbar. when collapse page sudden hide scrollbar back.

during scrollbar show , hide. page looks jumping.

either can hide , show animation smooth(i think not possible have tried) or else. please me find solution.

demo

<div class="bs-example"> <div class="panel-group" id="accordion">     <div class="panel panel-default">         <div class="panel-heading">             <h4 class="panel-title">                 <a data-toggle="collapse" data-parent="#accordion" href="#collapseone">1. html?</a>             </h4>         </div>         <div id="collapseone" class="panel-collapse collapse in">             <div class="panel-body">                 <p>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br>html stands hypertext markup language. html main markup language describing structure of web pages.<br> <a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank">learn more.</a></p>             </div>         </div>     </div>     <div class="panel panel-default">         <div class="panel-heading">             <h4 class="panel-title">                 <a data-toggle="collapse" data-parent="#accordion" href="#collapsetwo">2. bootstrap?</a>             </h4>         </div>         <div id="collapsetwo" class="panel-collapse collapse">             <div class="panel-body">                 <p>bootstrap powerful front-end framework faster , easier web development. collection of css , html conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">learn more.</a></p>             </div>         </div>     </div>     <div class="panel panel-default">         <div class="panel-heading">             <h4 class="panel-title">                 <a data-toggle="collapse" data-parent="#accordion" href="#collapsethree">3. css?</a>             </h4>         </div>         <div id="collapsethree" class="panel-collapse collapse">             <div class="panel-body">                 <p>css stands cascading style sheet. css allows specify various style properties given html element such colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">learn more.</a></p>             </div>         </div>     </div> </div> 

you can try diferent options:

set max height in panel-body; http://jsfiddle.net/wtrkqx19/2/

.panel-body{     max-height: 200px;     overflow: auto; } 

or show default scrollbar using

   overflow-y: auto;