Question

i’m using simple jQuery Tools Tabs

$("ul.tabs").tabs("div.panes > div");

with this html:

<!-- the tabs --> 
                <ul class="tabs"> 
                    <li><a href="#">Passenger Record</a></li> 
                    <li><a href="#">Annotations (10)</a></li> 
                </ul> 

                <!-- tab "panes" --> 
                <div class="panes"> 
                    <div>
                    First tab content. Tab contents are called "panes"
                        <div class="NoShow">THIS DIV IS HIDDEN??</div>
                    </div> 
                    <div>Second tab content</div> 
                </div> 

So the div with the class=”NoShow” is hidden. I believe it has to do with the javascript

("div.panes > div");

But I don’t want the DIVs inside the DIV Tabs to be hidden?? How do i just hide the DIVs associated to the Tabs?

Answer 1

$("div.panes > div"); refers only to direct children. The ‘NoShow’ div is a grandchild of ‘panes’.

Try $("#NoShow") instead — it’s faster, too, because you use an ID instead of a class.