How to put tabs, panel-DIVs in different container DIVs?
Ok, I'm stuck. I've been pulling my hair off for over a day now with this (not much hair left). I've Googled and Googled and Googled and leafed through the jQuery UI 1.6 book, and
all examples I've come across put the panels into the same container DIV with the tabs. In the site I'm building they can't be in the same container because of the way the page is laid out.
In some blog comments I saw a reference to this, but the purported page with a solution was gone.
So, simplified, rather than this:
-
<div id="tabs">
<ul>
<li><a href="#tab-home">Home</a></li>
<li><a href="#tab-pricing">Pricing</a></li>
<li><a href="#tab-about">About Us</a></li>
<li><a href="#tab-contact">Contact Us</a></li>
<li><a href="#tab-privacy">Privacy</a></li>
</ul>
<div id="tab-home">
home
</div>
<div id="tab-pricing">
pricing
</div>
<div id="tab-about">
about
</div>
<div id="tab-contact">
contact
</div>
<div id="tab-privacy">
privacy
</div>
</div>
I'd like to do this:
-
<div id="tabs">
<ul>
<li><a href="#tab-home">Home</a></li>
<li><a href="#tab-pricing">Pricing</a></li>
<li><a href="#tab-about">About Us</a></li>
<li><a href="#tab-contact">Contact Us</a></li>
<li><a href="#tab-privacy">Privacy</a></li>
</ul>
</div>
<div id="content">
<div id="tab-home">
home
</div>
<div id="tab-pricing">
pricing
</div>
<div id="tab-about">
about
</div>
<div id="tab-contact">
contact
</div>
<div id="tab-privacy">
privacy
</div>
</div>
It's probably (?) pretty simple, but rather than spending another day on it, perhaps someone here can shed light on how I can get it working.
Thanks in advance for any advice!