Talon
Talon

Reputation: 4995

How to hide div content but leave some content in JQuery

I have a div like this:

<div class="someDiv">
<span>This content should remain</span>
 The rest of this content needs to be hidden (Faded out)
</div>

I can't change the actual structure of the HTML.

Upvotes: 0

Views: 141

Answers (2)

adeneo
adeneo

Reputation: 318182

I would do something like this:

$('.someDiv').append('<span id="fade"></span').find('#fade').html($('.someDiv').contents().filter(function(){ return this.nodeType == 3; })).fadeOut(1000);

Fiddle : http://jsfiddle.net/adeneo/gdNue/1/

Upvotes: 1

Blazemonger
Blazemonger

Reputation: 92893

Use the visibility CSS attribute:

$('.someDiv').css('visibility','hidden')
    .find('span').css('visibility','visible');

http://jsfiddle.net/mblase75/WtMea/

I don't think it's possible to fade the outer div without also fading everything inside of it, but visibility can be overridden.

Upvotes: 5

Related Questions