Question

I’ve got a slider that’s built with jQuery UI Tabs:

<section id="featured">
    <aside id="sidebar">
        <ul class="ui-tabs-nav">
            <li class="ui-tabs-nav-item ui-tabs-selected">
                <a href="#panel_1">[Tab Heading]</a>
            </li>
            <li class="ui-tabs-nav-item">
                <a href="#panel_2">[Tab Heading]</a>
            </li>
            <li class="ui-tabs-nav-item">
                <a href="#panel_3">[Tab Heading]</a>
            </li>
            <li class="ui-tabs-nav-item">
                <a href="#panel_4">[Tab Heading]</a>
            </li>
        </ul>
    </aside>
    <section id="rotate_me">
        <div class="featured_panel" id="panel_1">
            <p>[Tab Content]</p>
        </div>
        <div class="featured_panel ui-tabs-hide" id="panel_2">
            <p>[Tab Content]</p>
        </div>
        <div class="featured_panel ui-tabs-hide" id="panel_3">
            <p>[Tab Content]</p>
        </div>
        <div class="featured_panel ui-tabs-hide" id="panel_4">
            <p>[Tab Content]</p>
        </div>
    </section>
    <script>$('#featured').tabs('rotate', 4000, false);</script>

The client wants the tabs to rotate through just the first and second tabs.

I added a function to the show event:

.tabs({
    show: function(event, ui) {
        var selected = $( ".selector" ).tabs( "option", "selected" );
        if (selected == 3) {
            $( "#featured" ).tabs( "option", "selected", 1 );
        }
    }
})

but this did nothing.

Any idea how I could make the slider rotate through just the first and second tab?

Answer 1

The selected option only applies to initialization. You could simply trigger a click on the first tab.

$("#featured li.ui-tabs-nav-item:first").trigger("click");