jQuery toggle changes element's width? I don't want it to! :(

Question

Hi guys,

I currently have a table that has a width of 94%, and the following toggle set to it:

 $(document).ready(function(){

  $("#moreinfo").hide();

  $("#toggleinfo").click(function () {
   $("#moreinfo").toggle('normal');
  });

 });

It toggles fine, but as soon as you toggle, the width goes really small and I have no idea why :( If I remove the hide() it's the right width, but again as soon as I start toggling it, the width automatically resizes.

Just tried the following css too:

#moreinfo { width: 94% !IMPORTANT; }

Edit: it seems to completely remove any width applied through CSS when I toggle it

Edit2: Wrapping it inside another div works! Not ideal, but not a bad solution I guess.

Any way to stop this please?

Answer 1

The jQuery toggle() function sets your target element ('#moreinfo' in this case) to display: block. It's just a guess without seeing your CSS or HTML, but I'm picking that the table, when having its display property changed, is being positioned or laid out incorrectly.

You may be able to work around this by wrapping your moreinfo element in another div with display: inline or position: relative? But that's just a guess. Do different browsers show the same result?

Answer 2

You can also shorten your:

$(document).ready(function(){

to

$(function(){

Just means you save a few bytes on the javascript file meaning ever so slightly faster download. Oh... and less typing :)