Question

I am trying to control tabs with a next/previous options. This is my JSFIDDLE EXAMPLE. I have spent hours researching and found the method NEXT/PREVIOUS function in this WEBSITE. I have replicated everything in my example but i am not getting any results. Can someone look at my EXAMPLE and tell me what I am doing wrong?

NEXT/PREVIOUS jquery/js

<script>
$(document).ready(function() {
    var $tabs = $('#st_horizontal').tabs();
    $(".st_tab_view").each(function(i) {
        var totalSize = $(".st_tab_view").size() - 1;
        if (i != totalSize) {
            next = i + 2;
            $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
        }
        if (i != 0) {
            prev = i;
            $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
        }
    });
    $('.next-tab, .prev-tab').click(function() {
        $tabs.tabs('select', $(this).attr("rel"));
        return false;
    });
});
</script>

Answer 1

First, you have to include the jQuery UI JS library to use jQuery UI Tabs. I edited your fiddle to include that and I got the next button displayed – http://jsfiddle.net/100thGear/kFNtX/3/

Second, you are combining two tabs plugins together on the same DOM element (sliding tabs and jQuery UI tabs) – then you are trying to programmatically traverse them using the jQuery UI way. I don’t think this will work very well. You need to choose one plugin to use.

Third, the sliding tabs plugin already provides you next and prev buttons. So I would suggest use the next/previous functions from the website you referred above only with jQuery UI tabs.

Hope this helps!

Update: This fiddle – http://jsfiddle.net/100thGear/PS336/ – demonstrates how the next/prev functionality can be achieved with Sliding Tabs.