トグル時にスペーシングが減少する

Question

トグル効果がトグル時に余分なスペーシングを起こさないようにする方法を知っている人はいますか？このトグルでは、コンテンツのスペーシングが変わらないようにしています。現在、私はトグルしていて、内容が表示されないときは間隔が狭くなり、トグルするコンテンツが表示されたときには増加します。以下では、私がした基本的なコードを追加しました。ありがとう!!

<div class="button_border"><button onclick="myFunction()">Transcript</button></div> 
<div id="content"> 
</div> 


<script> 
$(document).ready(function() { 
    $("button").click(function(){ 
     $("#mytranscript").toggle(); 
    }); 
}); 
</script> 

Answer 1

jQueryのtoggle（）メソッドは、要素のdisplay：プロパティを "none"に切り替えることで物を隠します。 CSSの仕様に従って、要素は削除され、他の要素はその領域を占めるように再フローします。

代わりにCSSのvisibility：hiddenプロパティを使用します。だから、次のようになります。隠されたと表示：なし

<div class="button_border"><button onclick="myFunction()">Transcript</button></div> 
<div id="content"> 
</div> 


<script> 
$(document).ready(function() { 
    $("button").click(function(){ 
     if ($(this).css('visibility') == 'hidden') 
     $(this).css('visibility','visible'); 
     else 
     $(this).css('visibility','hidden'); 
    }); 
}); 
</script> 

Hereは、視認性の差の素敵な説明です。