Question

I am hiding an element using inline css, like so:

<span class="hidden-nojs" style="display:none">Some text</span>

Next I use jQuery to show the element, like so:

$(".hidden-nojs").show();

This works great. As soon as I remove the inline css and put display:none on the external css stylesheet for the hidden-nojs class, it stops working. This is what I wrote in the external stylesheet:

.hidden-nojs {
    display: none;  
}

I’m assuming that the external stylesheet loads after the jQuery has already run? This is somewhat annoying as I would like to hide multiple elements with css and would like to avoid using inline css.

Why will show() only work for fields that are hidden using inline css? How can I fix this problem?

Answer 1

The problem is you’re trying to hide and show an inline element. The jQuery effects only work with block type elements. The jQuery effects manipulate inline element style, which is why that version works and the class version doesn’t.

If you think about it block type elements are rectangles. They’re easy to animate growing and shrinking because you simply animate their height and/or width.

Inline elements aren’t necessarily rectangles, which is why the jQuery effects mostly don’t work. To give you an example:

<p>Inside paragraph <span class="foo">This is a test</span> contains text.</p>
<input type="button" id="bar" value="Toggle">

Run:

$(function() {
  $("#bar").click(function() {
    $("span.foo").toggle();
  });
});

The first click will hide it. The second will turn it into a block (as in it will no longer be contained in the paragraph). This is what I mean about jQuery effects not really working with inline elements.

Internally, the jQuery effects work by a combination of animation and toggling in between display: none and display: block. What this means is jQuery effects don’t work on table cells either. Why? They’re not display: block, they’re effectively display: table-cell. Try this yourself and see what happens after you toggle() a table cell a couple of times.

So what’s the solution? For inline content the easiest solution is simply to use classes:

hidden { display: none; }

with

$("span.hideme").toggleClass("hidden");

This doesn’t have the animation effect. You can add this yourself but I’m not 100% how well animate() will work with inline elements.

Alternatively, if your content can be a block, make it a block and all these problems go away. In your case either use a <div> instead of a <span> or add display: block to the <span>.