Try to replace
tabContainers.hide().filter(':first').show();
with
$('div.tabs > div:gt(0)').hide();
On Jul 17, 8:20 am, "[email protected]"
<[email protected]> wrote:
> I am trying to get some tabs working based on a tutorial elsewhere.
> The difference is my tabs are within a nested div. My tabs are
> displaying but it is displaying the content of all 3 at once.
>
> Would appreciate some help fixing this as my Javascript knowledge is
> very limited.
>
> Here is the function I am using
>
> Code:
>
> <script src="js/jquery.js" type="text/javascript"
> charset="utf-8"></script>
> <script type="text/javascript" charset="utf-8">
> $(function () {
> var tabContainers = $('div.tabs > div');
> tabContainers.hide().filter(':first').show();
>
> $('div.tabs ul.tabNavigation a').click
> (function () {
> tabContainers.hide();
> tabContainers.filter(this.hash).show
> ();
> $('div.tabs ul.tabNavigation
> a').removeClass('selected');
> $(this).addClass('selected');
> return false;
> }).filter(':first').click();
> });
> </script>
>
> And here is my html
>
> Code:
>
> <body>
>
> <div id="outer">
>
> <div id="main">
>
> <div id="leftColumn">
>
> <div class="tabs">
>
> <ul class="tabNavigation">
> <li><a href="#first">Details</a></li>
> <li><a href="#second">Photos</a></li>
> <li><a href="#third">Map</a></li>
> </ul>
>
> <div id="first">
> </div>
>
> <div id="second">
> </div>
>
> <div id="third">
> </div>
>
> Thanks
>
> Paul
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
