ヒントと、このブートストラップトグル表示/非表示が滑らかでない理由に修正

Question

ちょうど私のブートストラップトグル表示/非表示を終了し、すべてがすべて一緒に、異なるコンテンツviewenの機能を除いて素晴らしい作品は非常にエッジの効いなく、滑らかですべてです。 。国境は私が誰かを助けることを願って、トグルなどを活性化するとき...

私の賭けは、それはスクリプトで奇妙なものでなければならないということでしょう。..飛び回る何をすべきかを知りません。

$('.testver a i').on('click', function(e) { 
 
    var currTarget = $(this).closest('a').data('target').substr(1); 
 
    $('#leftpanel').find('[id^="demo"]').not(currTarget).collapse('hide'); 
 
});

#leftpanel {position: relative; } 
 
#leftpanel h1 {font-size: 18px; font-family: 'Montserrat bold'; color:#b0a887; border-top: 1px solid #eee; font-style: normal;} 
 
#leftpanel h2 {font-size: 18px; font-family: 'Montserrat bold'; color:#b0a887; font-style: normal;} 
 
#leftpanel a {margin-left: 230px; position: relative; top: -40px; right: -100px;} 
 
#demo1, #demo2, #demo3, #demo4 { color: #333; font-size: 14px; margin-top: -40px; margin-right: 5px; font-family: 'Myriad Pro 31655';} 
 

 

 

 
.collapse {} 
 
.testver { width: 370px;} 
 

 
.testver hr { 
 

 

 
} 
 

 
.fa-angle-up { 
 
    display: none; 
 
} 
 

 
.testver i { 
 

 
} 
 

 
.testver .fa { 
 
    right: 
 
} 
 

 
.arrow[aria-expanded="true"] .fa-angle-up { 
 
    display: inline-block; 
 
} 
 

 
    .arrow[aria-expanded="true"] .fa-angle-down { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div id="leftpanel"> 
 
       <div class="testver"> 
 
        <h1>Never seen before</h1> 
 

 

 
        <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo1"> 
 
         <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i> 
 
         <i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i> 
 
        </a> 
 
        <div id="demo1" class="collapse in" aria-expanded="true"> 
 
         text 
 
        </div> 
 
        <hr> 
 
       </div> 
 
       <div class="testver"> 
 
        <h2>Art and technology</h2> 
 

 

 
        <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo2"> 
 
         <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i> 
 
         <i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i> 
 
        </a> 
 
        <div id="demo2" class="collapse"> 
 
         text 
 
        <hr> 
 
       </div> 
 
       <div class="testver"> 
 
        <h2>Authenticity</h2> 
 

 

 
        <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo3"> 
 
         <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i> 
 
         <i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i> 
 
        </a> 
 
        <div id="demo3" class="collapse"> 
 
         text 
 
        </div> 
 
        <hr> 
 
       </div> 
 
       <div class="testver"> 
 
        <h2>Level of detail</h2> 
 

 

 
        <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo4"> 
 
         <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i> 
 
         <i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i> 
 
        </a> 
 
        <div id="demo4" class="collapse"> 
 
         text 
 
        </div> 
 
        <hr> 
 
       </div> 
 
      </div> 
 
      </div>

Answer 1

margin-top:-40px

のあなたが<h1> へmargin-bottom: -20pxなどの他のトリックとのギャップを削除し、<a>top: -40px