All, I am new to using jQuery, but have been playing with it this weekend and am stuck on one area which I have exhausted resources.
I have an index.html page which has three Tabs inside a DIV container. The tab content is populated using Ajax and a seperate html file. <div id="index_tab_container" class="index_tab_container"> <!-- Tabs --> <div id="tabs"> <ul> <li><a href="HomeTab.html" title="Home Page">Home</a></li> <li><a href="NXTab.html" title="Support">NX</a></li> <li><a href="TCTab.html" title="Support Two"></a></li> </ul> </div> </div> Below this I have a jQuery Accordion menu..code below <script type="text/javascript"> $(function(){$("#index_accordion").accordion({ header: "h3", active: false, collapsible: true, autoHeight: false });}); </script> <div id="index_accordion"> <div> <h3><a href="#">CAD Standards</a></h3> <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> </div> <div> <h3><a href="#">Meeting Minutes</a></h3> <div>Phasellus mattis tincidunt nibh.</div> </div> <div> <h3><a href="#">Meeting Minutes 2</a></h3> <div>Nam dui erat, auctor a, dignissim quis.</div> </div> </div> I would like to do this.... When a user clicks to view one of the other tabs (apart from HomeTab.html) I would like to hide the Accordion which is displayed on the home page. I have tried loads of syntax but cannot get anything to work. This is what I have at present at the top of the NXTab.html, but it does not work. $(function() {$(this).parent('div.index_accordion').hide(); }); Any help would be really appreciated. Andy