The trick here is that while the enveloping div can be referred to by
its class, the tabs must have unique IDs. The script should be as
suggested by thelemondropkid, with the html as follows:
<div class="tabs">
<ul>
<li><a href="#tabs1-1">set 1 tab 1</a></li>
<li><a href="#tabs1-2">set 1 tab 2</a></li>
</ul>
<div id="tabs1-1">
<p>blah</p>
</div>
<div id="tabs1-2">
<p>more blah</p>
</div>
</div>
<div class="tabs">
<ul>
<li><a href="#tabs2-1">set 2 tab 1</a></li>
<li><a href="#tabs2-2">set 2 tab 2</a></li>
</ul>
<div id="tabs2-1">
<p>set 2 blah</p>
</div>
<div id="tabs2-2">
<p>more set 2 blah</p>
</div>
</div>
On Aug 13, 5:21 am, thelemondropkid <[email protected]> wrote:
> Hello Tony,
>
> What you need to do is change <div id"tabs"> to <div class="tabs"> and
> then add a second <div class="tabs"> wherever you need it.
> Secondly, don´t forget to change the javascript call at the bottom of
> your page to reflect that it is now a 'class' and not an 'ID'.
>
> Like this:
>
> <script type="text/javascript">
> $(function() {
> $(".tabs").tabs();
> });
> </script>
>
> That should do the trick !
>
> Quintin
>
> On Jul 24, 7:16 pm, Tony S <[email protected]> wrote:
>
>
>
> > All,
>
> > I'm trying to use 2 different jquery ui tab sets on a page:
>
> > <div id="tabs">
> > <ul>
> > <li ><a href="#tabs-1">tab set 1</a></li>
> > </ul>
> > </div>
>
> > <div id="tabs">
> > <ul>
> > <li ><a href="#tabs-1">tab set 2</a></li>
> > </ul>
> > </div>
>
> > Only the first styles properly. How can I use multiple tab sets on a
> > page?
>
> > Thanks,
> > Tony S.
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
