CODEWITHSUNDEEP
jquerytextshow-hide
reinhat
reinhat

Reputation: 23

jQuery hiding text only in <h2> block not background

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?

Upvotes: 1

Views: 2308

Answers (7)

Hussein
Hussein

Reputation: 42818

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/

Upvotes: 0

DarthJDG
DarthJDG

Reputation: 16591

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 &nbsp; after your wrapped text to make the <h2> always keep its height.

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1075109

You could replace the text of the h1 with &nbsp;. 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 '&nbsp;';
        });
        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.

Upvotes: 3

Chad
Chad

Reputation: 19619

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.

Upvotes: 1

Benny Tjia
Benny Tjia

Reputation: 4883

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');

Upvotes: 0

Ry-
Ry-

Reputation: 225095

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

Upvotes: 0

Mutation Person
Mutation Person

Reputation: 30520

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

Upvotes: 2

Related Questions