Using jQuery UI Tabs with a custom HTML Layout

Question

The markup required by jQuery UI Tabs is like following...

<ul>
  <li>Tab1</li>
  <li>Tab2</li>
  <li>Tab3</li>
</ul>
<div>
  Panel 1
</div>
<div>
  Panel 2
</div>
<div>
  Panel 3
</div>

That is good enough in some cases, but in other cases where SEO and usability are top priorities, this markup is not the better. I would have working jQuery UI Tabs with the following markup...

<div id="tabs">
  <div class="panel">
    <h3>Tab1</h3>
     Panel content 1
  </div>
  <div class="panel">
    <h3>Tab2</h3>
     Panel content 2
  </div>
  <div class="panel">
    <h3>Tab3</h3>
     Panel content 3
  </div>
</div>

It is that possible?

I found here (http://christianyates.com/blog/semantic-tabs/semantic-tabs-jquery) another plugin that solve this problem, but I would use the jQuery UI Tabs plugin.

Answer 1

I recommend JQuery UI style. That is less complicated and less coding. Probably it would not get backward with SEO.

Answer 2

Its not available right now with jQuery UI tabs. on jQuery forums the status on such a request is 'we'll think about it' (ref: http://forum.jquery.com/topic/new-markup-structure-for-tabs)

The same person has suggested the changes as follows: http://fittopage.org/2010/05/tabs-done-right/