JQuery Tab.UI using Next/Previous – Multiple Instances

[jjmclaw]

Hi All,

New to this JQuery lark and have used the tutorial off here for the Next/Previous buttons which work perfectly.

I now need to have a second instance of this working on the same page as the first, i’ve tried just copying it but the second one doesn’t work.

So, could someone point me in the right direction of how I get 2 instances working on the same page.

Thanks,

Jay

[jjmclaw]

Hey,

The code I used was this:

Code:

<script type="text/javascript">
$(function() {

var $tabs = $(‘#tabs’).tabs();

$(".ui-tabs-panel").each(function(i){

var totalSize = $(".ui-tabs-panel").size() – 1;

if (i != totalSize) {
next = i + 2;
$(this).append("<a href=’#’ class=’next-tab mover’ rel=’" + next + "’></a>");
}

if (i != 0) {
prev = i;
$(this).append("<a href=’#’ class=’prev-tab mover’ rel=’" + prev + "’></a>");
}

});

$(‘.next-tab, .prev-tab’).click(function() {
$tabs.tabs(‘select’, $(this).attr("rel"));
return false;
});

});
</script>

[jjmclaw]

Hi All,

Is anyone able to help me out please?

Thanks,

Jay

[noahgelman]

I’m not sure what you you’re asking. Are you talking about this?

http://jqueryui.com/demos/tabs/#default

And are you trying to add previous and next buttons to it?

[noahgelman]

Oh wait, I see. You are using the jQuery UI Tabs, and added previous and next buttons, but they only work properly on the first click.

Yes, which tutorial did you use?

[noahgelman]

https://css-tricks.com/examples/TabsNextPrev/

Ok, this is what you used. You need to make sure that the classes and Id’s match or else there’s going to be some confliction.

[jjmclaw]

Hey does this mean that I need to copy the JQuery and rename all of the classes, then match the id’s to suite this?

[Kenpachi]

Hello, is there a way that clicking on the content panel, go to the next page? I use it as a image viewer. Sorry for my English

[Author]

Posts