CODEWITHSUNDEEP
jqueryvisible
user684934
user684934

Reputation:

JQuery :visible filter

I'm trying to implement my own tabs, but in certain cases the :visible selector doesn't appear to work as I think it should:

http://jsfiddle.net/TtCLQ/1/

In short, when a div contains only input type "image" or "file", it appears that :visible is always returning false regardless of whether or not they are actually visible. (Tested on latest Chrome and IE9.)

Is this a bug, or am I expecting the wrong behavior? What should I be doing instead to detect if a div (and its children) is being displayed?

(In the fiddle, you can see that the :visible filter doesn't appear to be working by looking at tab3's style in firebug as you switch tabs around.)

Upvotes: 2

Views: 804

Answers (2)

mkoryak
mkoryak

Reputation: 57928

children() returns only direct children so the div under the tab div remains hidden.

I made your code a little smaller by removing unneeded loops etc:

http://jsfiddle.net/TtCLQ/6/

Upvotes: 0

SoWhat
SoWhat

Reputation: 5622

#pane div selects all the divs in the #pane and sets them to displaY:none So the div inside the div inside the pane is also invisible. When you set the #tab3 to show, you are not showing the div inside, hence the problem. i.e #tab3 becomes visible, but #tab3>div doesn't become visible. I updated the fiddle with 

#pane>div
{ 
display:none;
}

This only selects the immediate child div and not the divs inside these divs. Another way is to add a class to the tabs (.tab) and set their visibility collectively

Upvotes: 2

Related Questions