jQuery UI Tabs without the ul and li elements

Something really annoys me about jQuery UI and how its markup is laid out, especially around tabs.

<div class="tabs">
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3">Tab 3</a></li>
<div id="tab-1">
<div id="tab-2">
<div id="tab-3">

You can use

<div class="tabs">
<div id="tab-1" title="Tab 1">
<div id="tab-2" title="Tab 2">
<div id="tab-3" title="Tab 3">

Using the simple code below with jquery+jqueryui, you can remove the need entirely for the ul and li elements.

$('.tabs').each(function() {
    var m_ul = $('<ul/>');
    $(this).children('div[title]').each(function() {
        var m_id = ($(this).attr('id') != undefined ? $(this).attr('id') : $(this).attr('title').replace(/\s/g, '_'));
        $(this).attr('id', m_id);
        $(m_ul).append($('<li/>').append($('<a/>').attr('href', '#' + m_id).text($(this).attr('title'))));


comments powered by Disqus