Bootstrap гармошка переходит в центр страницы при загрузке - PullRequest
Новая
       17

Bootstrap гармошка переходит в центр страницы при загрузке

0 голосов
/ 20 марта 2019

Я строю боковую панель навигации, используя развал Bootstrap, и хочу, чтобы все секции были открыты при загрузке. Мой код ниже делает это, но он также переходит на середину страницы при загрузке. Похоже, страница прыгает прямо под второй расширяемый раздел. Есть ли способ это исправить? 

<div class="panel-group" id="accordion" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" id="headingOne">
      <h4 class="panel-title"><a role="button" data-toggle="collapse" data-target="#collapseOne">My Case<i class="pull-right fa fa-plus"></i></a></h4>
    </div>
    <div class="panel-collapse collapse show" id="collapseOne">
      <div class="panel-body">
        <a href="javascript:void(0);" class="list-group-item">At A Glance</a> 
        <a href="javascript:void(0);" class="list-group-item">Authorized Representatives</a>
        <a href="javascript:void(0);" class="list-group-item">Benefits</a>
        <a href="javascript:void(0);" class="list-group-item">Granite Advantage</a>
        <a href="javascript:void(0);" class="list-group-item">Documents</a>
        <a href="javascript:void(0);" class="list-group-item">Notices</a>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" id="headingTwo">
      <h4 class="panel-title"><a role="button" data-toggle="collapse" data-target="#collapseTwo">My Profile<i class="pull-right fa fa-plus"></i></a></h4>
    </div>
    <div class="panel-collapse collapse show" id="collapseTwo">
      <div class="panel-body">
        <a href="javascript:void(0);" class="list-group-item">Contact Information</a> 
        <a href="javascript:void(0);" class="list-group-item">Get In Touch</a>
        <a href="javascript:void(0);" class="list-group-item">Security Settings</a>           
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" id="headingThree">
      <h4 class="panel-title">Need Help?</h4>
      <p class="small m-t-sm">If you have a question about your case, contact the Customer Service Center.</p>
      <br/>
      <i class="fas fa-phone fa-flip-horizontal m-r-sm blue"></i>1-844-CALL-HELP
      <br/>
      <i class="fas fa-envelope m-r-sm blue"></i><a href="#" target="_blank">Email</a> 
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 20 марта 2019

Удалить «шоу» из имен классов.И добавьте этот скрипт в раздел head. 

<script>
$(document).ready(function(){
  $('#accordion .panel-collapse').collapse('toggle');
});
</script>
...