jQuery hiding text only in <h2> block not background

开发者_JAVA百科I have an <h2> text title block with a set background color and text content. I want to hide the text content and not the background color. When I use hide() on the <h2> it hides the whole block with everything. I need the block with the color and then I want the text to appear later.

I was thinking of wrapping it in a div and using the background color of the div but it will result in extra code.

Is it possible to control just text content only within the the <h2> and not the entire box?

You could replace the text of the h1 with  . That would preserve the vertical space consumed by the element, but with no text showing. (Don't replace its text with a blank string, the element would effectively disappear.)

Expressed as a jQuery plug-in (although that may be a bit overkill :-) ):

(function($) {
    $.fn.hideText = function() {
        this.html(function() {
            var $this = $(this);
            $this.attr('data-oldtext', $this.html());
            return ' ';
        });
        return this;
    };
    $.fn.showText = function() {
        this.html(function() {
            var $this = $(this);
            return $this.attr('data-oldtext') || $this.html();
        });
        return this;
    };
})(jQuery);

Live copy

That said, I'd step back a moment and consider whether this really is the right thing to do. It may well be, but it seems a bit odd.

What about making the text the same colour as the background?

Short answer is no. You cannot 'hide' just the text.

That being said you can simulate it being hidden in a couple of ways:

1) You can remove the text, storing it locally then reset it on unhide.

var txt;
function hide() {
  txt = $('h2').text();
  $('h2').text('');
}
function show() {
  $('h2').text(txt);
}

However, this will make you have to have a static width/height on the<h2>element or it will change size when you change the text.

2) Making the text color match the background color also could simulate 'hiding' the text.

3) Or probably the best option, just wrap it in a div with a background color, and call it a day.

Why not wrap the text inside the header like this then hide the inner element:

<h2><span>Your text here</span>&nbsp;</h2>

then in jQuery, use the following selector:

$('h2 > span');

Edit: @T.J. Crowder's suggestion is indeed a good one, you can always put an   after your wrapped text to make the <h2> always keep its height.

You could set text-indent to -9999px or something like that.

rather than using hide(), you can just change the h2 text color to be the same as the background color, that would create a hide effect:

$('h2').css('color','your-background-color');

You can do

$('h2').contents().filter(function() {
    return this.nodeType === 3
}).wrap('<b />');

This will wrap the text with a <b> tag. in your css set the <b> tag to display:none;. This will hide the text and not the h2 tag.

Check working example at http://jsfiddle.net/BE8N9/1/