bootstrap accordion content very long <p>I have bootatrsp accordion in my site. in one accordion panel I have a lot of content. when I scroll down to read the rest of the content and then click the next panel, then the one above(wich is open) closes and move up. the rest of the panels move up with it and now I can't see the relevat content because it scrolled up. how can I make the open panel of the accordion to always be in viewport of the screen no metter which panel i clicked.</p> <p>here is the code i used:</p> <pre><code> &lt;div class="row divAccordion" id="referNav"&gt; &lt;div id="accordion" role="tablist" aria-multiselectable="true"&gt; &lt;div class="panel panel-default visible-True"&gt; https://box.2beweb.chttps://jsfiddle.net/tartash/y5nc0u4w/3/# &lt;a name="collapseOne"&gt;&lt;/a&gt; &lt;div class="panel-heading" role="tab" id="headingOne"&gt; &lt;h4 class="panel-title"&gt; &lt;a id="referLink1" class="openPanel" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"&gt;&lt;i class="fa fa-plus-circle fa-minus-circle"&gt;&lt;/i&gt; Lorem Ipsum &lt;/a&gt; &lt;/h4&gt; &lt;/div&gt; &lt;div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"&gt; &lt;div&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut orci magna. Pellentesque sagittis nibh in venenatis dapibus. Duis vitae accumsan enim, nec viverra mauris. Curabitur posuere, odio id sagittis consectetur, quam sapien cursus eros, a consequat enim lacus a dolor. Sed urna augue, ullamcorper sed urna id, hendrerit tristique mi. Mauris id lorem a nisi viverra venenatis et ac ligula. Aenean varius neque sed lectus elementum, in fermentum metus commodo. Fusce congue erat et elit fringilla, at feugiat dolor luctus. Nulla facilisi. &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-------------------------------------------------------------------&gt; &lt;div class="panel panel-default visible-True"&gt; &lt;a name="collapseTwo"&gt;&lt;/a&gt; &lt;div class="panel-heading" role="tab" id="headingTwo"&gt; &lt;h4 class="panel-title"&gt; &lt;a id="referLink2" class="collapsed openPanel" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"&gt;&lt;i class="fa fa-plus-circle"&gt;&lt;/i&gt; Duis &lt;/a&gt; &lt;/h4&gt; &lt;/div&gt; &lt;div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"&gt; Duis tempor molestie maximus. Phasellus aliquet hendrerit ante quis condimentum. Vestibulum scelerisque, nibh in ornare tincidunt, arcu mauris rhoncus lectus, vel blandit leo diam eget dui. Nunc sed porta libero, ac interdum urna. &lt;/div&gt; &lt;/div&gt; &lt;!-------------------------------------------------------------------&gt; &lt;div class="panel panel-default visible-False"&gt; &lt;a name="collapseThree"&gt;&lt;/a&gt; &lt;div class="panel-heading" role="tab" id="headingThree"&gt; &lt;h4 class="panel-title"&gt; &lt;a id="referLink3" class="collapsed openPanel" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"&gt;&lt;i class="fa fa-plus-circle"&gt;&lt;/i&gt; Aliquam &lt;/a&gt; &lt;/h4&gt; &lt;/div&gt; &lt;div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"&gt; Aliquam at lorem id nibh blandit feugiat. Curabitur fermentum, ligula a aliquet malesuada, augue ligula feugiat odio, quis lobortis nisl tortor a nisl. Etiam vitae lacus sit amet odio placerat faucibus. Suspendisse orci diam, mollis eget interdum quis, tincidunt non lorem. Quisque imperdiet, tellus et iaculis lobortis, massa tortor ullamcorper neque, posuere sollicitudin massa risus commodo tellus. Phasellus a tristique nibh. Sed aliquet quam velit. Sed lorem mi, sodales vitae varius quis, pretium vitae enim. Donec eu congue eros. Praesent quis felis neque. Sed volutpat volutpat sodales. Cras nulla orci, fermentum et urna nec, tincidunt suscipit arcu. Maecenas imperdiet ornare commodo. Praesent luctus tellus vel blandit pretium. Donec in dolor ut lectus vehicula efficitur vel nec leo. Proin sit amet fermentum elit. &lt;/div&gt; &lt;/div&gt; &lt;!-------------------------------------------------------------------&gt; &lt;div class="panel panel-default visible-False"&gt; &lt;a name="collapseFour"&gt;&lt;/a&gt; &lt;div class="panel-heading" role="tab" id="headingFour"&gt; &lt;h4 class="panel-title"&gt; &lt;a id="referLink4" class="collapsed openPanel" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"&gt;&lt;i class="fa fa-plus-circle"&gt;&lt;/i&gt; Lorem ipsum dolor &lt;/a&gt; &lt;/h4&gt; &lt;/div&gt; &lt;div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour"&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut orci magna. Pellentesque sagittis nibh in venenatis dapibus. Duis vitae accumsan enim, nec viverra mauris. Curabitur posuere, odio id sagittis consectetur, quam sapien cursus eros, a consequat enim lacus a dolor. Sed urna augue, ullamcorper sed urna id, hendrerit tristique mi. Mauris id lorem a nisi viverra venenatis et ac ligula. Aenean varius neque sed lectus elementum, in fermentum metus commodo. Fusce congue erat et elit fringilla, at feugiat dolor luctus. Nulla facilisi. Duis tempor molestie maximus. Phasellus aliquet hendrerit ante quis condimentum. Vestibulum scelerisque, nibh in ornare tincidunt, arcu mauris rhoncus lectus, vel blandit leo diam eget dui. Nunc sed porta libero, ac interdum urna. Fusce quis libero eu neque congue gravida et vitae mi. Mauris egestas ex eu neque consequat suscipit. In mattis diam non metus luctus rhoncus. Donec elementum consectetur ipsum, vel fringilla leo ullamcorper sit amet. Sed vestibulum pretium rutrum. Pellentesque hendrerit ipsum magna, aliquam vestibulum justo varius in. Proin iaculis velit felis, at posuere nunc mattis quis. Mauris mattis lectus in tempus volutpat. Curabitur sed nibh vel tellus aliquet faucibus. Maecenas sit amet enim ullamcorper, fringilla odio vitae, elementum metus. Quisque at justo vitae lectus porttitor pretium. Aliquam at lorem id nibh blandit feugiat. Curabitur fermentum, ligula a aliquet malesuada, augue ligula feugiat odio, quis lobortis nisl tortor a nisl. Etiam vitae lacus sit amet odio placerat faucibus. Suspendisse orci diam, mollis eget interdum quis, tincidunt non lorem. Quisque imperdiet, tellus et iaculis lobortis, massa tortor ullamcorper neque, posuere sollicitudin massa risus commodo tellus. Phasellus a tristique nibh. Sed aliquet quam velit. Sed lorem mi, sodales vitae varius quis, pretium vitae enim. Donec eu congue eros. Praesent quis felis neque. Sed volutpat volutpat sodales. Cras nulla orci, fermentum et urna nec, tincidunt suscipit arcu. Maecenas imperdiet ornare commodo. Praesent luctus tellus vel blandit pretium. Donec in dolor ut lectus vehicula efficitur vel nec leo. Proin sit amet fermentum elit. Integer luctus dapibus sagittis. Vestibulum eget lectus id felis suscipit hendrerit ullamcorper vel nisl. Duis facilisis ligula eget ultrices fringilla. Etiam volutpat luctus nulla quis dictum. Sed consequat lorem id magna efficitur rhoncus. Donec massa sem, mattis in massa non, fringilla ultricies nisi. Proin aliquet rutrum lectus id tempus. Donec justo lorem, blandit ac hendrerit vitae, dictum in ligula. Sed ut mollis sem, eu consequat turpis. Aliquam ultrices risus vel nulla finibus, quis cursus tellus suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce non est lacus. Sed sed ultricies neque. Morbi nunc dui, varius bibendum erat non, semper tincidunt nulla. Etiam viverra feugiat arcu nec tempor. Quisque tempor vitae arcu non euismod. Nullam eu sem id quam pharetra blandit quis ut massa. Quisque molestie scelerisque lacus in ultricies. Nam venenatis scelerisque nunc, sed pellentesque tortor ultrices vel. Curabitur ac finibus lacus. Morbi bibendum urna interdum, ullamcorper sapien vitae, molestie orci. Vestibulum viverra mollis purus, sed mattis metus convallis sed. Quisque ipsum nisi, tincidunt pretium commodo et, vestibulum a tortor. Donec imperdiet diam non nulla dictum malesuada. Maecenas pellentesque dolor vel erat hendrerit pellentesque. Nulla in eros et nunc varius dapibus. Aliquam pharetra ornare facilisis. Phasellus pharetra mauris vel felis porttitor efficitur eget nec sem. Etiam vel fringilla turpis. Suspendisse potenti. Ut fringilla feugiat lacinia. Etiam mattis mauris velit, et dictum ex scelerisque et. &lt;/div&gt; &lt;/div&gt; &lt;!-------------------------------------------------------------------&gt; &lt;div class="panel panel-default visible-False"&gt; &lt;a name="collapseFive"&gt;&lt;/a&gt; &lt;div class="panel-heading" role="tab" id="headingFive"&gt; &lt;h4 class="panel-title"&gt; &lt;a id="referLink5" class="collapsed openPanel" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive"&gt;&lt;i class="fa fa-plus-circle"&gt;&lt;/i&gt; Nullam eu sem &lt;/a&gt; &lt;/h4&gt; &lt;/div&gt; &lt;div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive"&gt; Nullam eu sem id quam pharetra blandit quis ut massa. Quisque molestie scelerisque lacus in ultricies. Nam venenatis scelerisque nunc, sed pellentesque tortor ultrices vel. Curabitur ac finibus lacus. Morbi bibendum urna interdum, ullamcorper sapien vitae, molestie orci. Vestibulum viverra mollis purus, sed mattis metus convallis sed. Quisque ipsum nisi, tincidunt pretium commodo et, vestibulum a tortor. Donec imperdiet diam non nulla dictum malesuada. Maecenas pellentesque dolor vel erat hendrerit pellentesque. Nulla in eros et nunc varius dapibus. Aliquam pharetra ornare facilisis. Phasellus pharetra mauris vel felis porttitor efficitur eget nec sem. Etiam vel fringilla turpis. Suspendisse potenti. Ut fringilla feugiat lacinia. Etiam mattis mauris velit, et dictum ex scelerisque et. &lt;/div&gt; &lt;/div&gt; &lt;!-------------------------------------------------------------------&gt; &lt;div class="panel panel-default visible-True"&gt; &lt;a name="collapseSix"&gt;&lt;/a&gt; &lt;div class="panel-heading" role="tab" id="headingSix"&gt; &lt;h4 class="panel-title"&gt; &lt;a id="referLink6" class="collapsed openPanel" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix"&gt;&lt;i class="fa fa-plus-circle"&gt;&lt;/i&gt; Integer luctus &lt;/a&gt; &lt;/h4&gt; &lt;/div&gt; &lt;div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix"&gt; Integer luctus dapibus sagittis. Vestibulum eget lectus id felis suscipit hendrerit ullamcorper vel nisl. Duis facilisis ligula eget ultrices fringilla. Etiam volutpat luctus nulla quis dictum. Sed consequat lorem id magna efficitur rhoncus. Donec massa sem, mattis in massa non, fringilla ultricies nisi. Proin aliquet rutrum lectus id tempus. Donec justo lorem, blandit ac hendrerit vitae, dictum in ligula. Sed ut mollis sem, eu consequat turpis. Aliquam ultrices risus vel nulla finibus, quis cursus tellus suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce non est lacus. Sed sed ultricies neque. Morbi nunc dui, varius bibendum erat non, semper tincidunt nulla. Etiam viverra feugiat arcu nec tempor. Quisque tempor vitae arcu non euismod. &lt;/div&gt; &lt;/div&gt; &lt;!-------------------------------------------------------------------&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>thank you in advance </p>