Bootstrap Akkordeon Einsturz Inhalt Rückruf ist nicht glatt

Question

besser zu wissen, was ich meine, bitte meinen Code zugreifen hier https://jsfiddle.net/gnhta7q8/

Ich will nicht die ganze Datei von bootstrap.css auf meine Website befestigen. Also habe ich gerade den CSS-Code daraus in mein Stylesheet importiert, das ich für den Kollaps brauche. Aber immer noch ist dies ein Problem bezüglich des Inhalts, der verzögert wird, wenn das Panel zurückgerufen wird.
So etwas fehlt noch in meinem Code, was ist das? Wer wird professionell genug sein, um mein Problem zu lösen? Dank

Mein Code

HTML

<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="#collapse1">Collapsible Group 1</a> 
    </h4> 
    </div> 
    <div id="collapse1" class="panel-collapse collapse"> 
    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
.</div> 
    </div> 
</div> 
<div class="panel panel-default"> 
    <div class="panel-heading"> 
    <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a> 
    </h4> 
    </div> 
    <div id="collapse2" class="panel-collapse collapse"> 
    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
</div> 
    </div> 
</div> 
<div class="panel panel-default"> 
    <div class="panel-heading"> 
    <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion"     href="#collapse3">Collapsible Group 3</a> 
    </h4> 
    </div> 
    <div id="collapse3" class="panel-collapse collapse"> 
    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur  adipisicing elit, 
.</div> 
    </div> 
</div> 
    </div> 

CSS

.panel-group 
{ 
margin-bottom: 20px; 
} 
.panel-group .panel 
{ 
margin-bottom: 0; 
border-radius: 4px; 
} 
.panel-default 
{ 
border-color: #ddd; 
} 
.panel 
{ 
margin-bottom: 20px; 
background-color: #fff; 
border: 1px solid transparent; 
border-radius: 4px; 
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); 
box-shadow: 0 1px 1px rgba(0,0,0,.05); 
} 
.panel-default > .panel-heading 
{ 
color: #333; 
background-color: #f5f5f5; 
border-color: #ddd; 
} 
.panel-group .panel-heading 
{ 
border-bottom: 0; 
} 
.panel-heading 
{ 
padding: 10px 15px; 
border-bottom: 1px solid transparent; 
border-top-left-radius: 3px; 
border-top-right-radius: 3px; 
} 
.panel-title 
{ 
margin-top: 0; 
margin-bottom: 0; 
font-size: 16px; 
color: inherit; 
} 
.collapse.in 
{ 
display: block; 
} 
.collapse 
{ 
display: none; 
} 
.panel-body::after 
{ 
clear: both; 
} 
.panel-body::after, .panel-body::before, 
{ 
display: table; 
content: " "; 
} 
.panel-default > .panel-heading + .panel-collapse > .panel-body 
{ 
border-top-color: #ddd; 
} 
.panel-group .panel-heading + .panel-collapse > .panel-body 
{ 
border-top: 1px solid #ddd; 
color: #000; 
} 
.panel-body 
{ 
padding: 15px; 
} 
.panel-group .panel + .panel 
{ 
margin-top: 5px; 
} 

Answer 1

Hinzufügen .collapsing Klasse. Bitte überprüfen Sie die FIDDLE

.collapsing { 
    position: relative; 
    height: 0; 
    overflow: hidden; 
    -webkit-transition: height .35s ease; 
     -o-transition: height .35s ease; 
      transition: height .35s ease; 
} 

Answer 2

versuchen, dies zu Ihrem CSS hinzufügen

.collapsing { 
    position: relative; 
    height: 0; 
    overflow: hidden; 
    -webkit-transition: all 0.2s; /* Safari */ 
    transition: all 0.2s; 
}