When Toggle, spacing decreases

Question

does anyone know how I can stop the toggle effect from causing extra spacing to appear when toggling? The toggle does not allow my content spacing to remain the same. Currently I toggle and when the content is not showing the spacing decreases, then increase when the toggling content displays. Below I added a basic code I did. Thanks!!

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


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

There is nothing called **mytranscript**, so from this piece of code nothing is clear about what you want to achieve. — Nishesh Pratap Singh, May 12 '17 at 16:59

score 0 · Accepted Answer · edited May 23 '17 at 11:54

The jQuery toggle() method hides things by switching the element's display: property to "none." Per the CSS spec, the element is removed and other elements re-flow to take up its space.

You want to use the CSS visibility: hidden property instead. So it would look like this:

<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 is a nice explanation of the difference between visibility:hidden and display:none.

When Toggle, spacing decreases

1 Answers1