jQuery tabs, separate divs for tabs and content

Question

I'm using jquery tabs with no problems except that I would like to have separate divs for the list (tabs) and the content.

<div id="tabs">
    <ul>
     <li><a href="#articles">Articles</a></li>
     <li><a href="#videos">Videos</a></li>
     <li><a href="#photos">Photos</a></li>
    </ul>

    <div id="articles" class="bd">Lorem ipsum dolor sit amet,</div>
    <div id="videos" class="bd">Lorem ipsum dolor sit amet,</div> 
    <div id="photos" class="bd">Lorem ipsum dolor sit amet,</div>
</div>

But what I would like to do is wrap the ul and the content in separate divs.

<div id="tabs">
    <div class="hd">
     <ul>
      <li><a href="#articles">Articles</a></li>
      <li><a href="#videos">Videos</a></li>
      <li><a href="#photos">Photos</a></li>
     </ul>
    </div>

    <div class="bd">
        <div id="articles" class="bd">Lorem ipsum dolor sit amet,</div>
        <div id="videos" class="bd">Lorem ipsum dolor sit amet,</div> 
        <div id="photos" class="bd">Lorem ipsum dolor sit amet,</div>
    </div>
</div>

I've looks through the documentation but dont see a place to specify this. Any help would be greatly appreciated.

Answer 1

I just tried it out. You can wrap the content into a div. It's only when you wrap the ul in a div that it breaks.

Since unordered-lists are considered block-level, there really isn't a need to wrap them in a header div, unless you want to put ohter things in that header area, which would probably cause the js to break anyway.

Not sure this is what you want, but maybe it's a step closer.

update:

I just opened up the sample code that doesn't work (the one with the header wrapper div) in Firebug to see why the styling doesn't work. jquery-ui never adds the classes to the unordered list or the list items. This means that the tabs module must be looking for the first unorded list that is a child of the main div (as opposed to the first unordered list that is a descendant). This makes some sense, because it would be much more difficult (I think) for it to traverse every child element to look for an unordered list that they contain PLUS take into account any unordered lists that are direct children, then determine which is the one that should be made into the tabs.

But what you can do, I discovered, is put other things above the unordered list. So if you wanted, say, to put your site name above the tabs, you could do so like this:

<div id="tabs">
<h1>My Site</h1>
        <ul>
                <li><a href="#articles">Articles</a></li>
                <li><a href="#videos">Videos</a></li>
                <li><a href="#photos">Photos</a></li>
        </ul>

    <div class="bd">
        <div id="articles">Lorem ipsum dolor sit amet,</div>
        <div id="videos">Lorem ipsum dolor sit amet,</div>   
        <div id="photos">Lorem ipsum dolor sit amet,</div>
    </div>
</div>

And since it's within the tabs div but above the actual tabs, it looks pretty sharp.