JQuery UI Tabs: Cookie persistance with multiple tabs

Question

Hey I have code that wires up the tabs in the Ready function for Jquery UI tabs simplar to

// wireup tabs
$(".tabs").tabs({
    cookie: {
        expires: 30
    }
});

This works great, except that the tab index is persisted across all tabs locations (since I'm using the .tabs selector to wire all my tabs at once). Is there a way to auto wire the cookie name to be different foreach found item matching the selector?

Answer 1

$(this) refers to the document when running this in the above situation. However running the wireup in an each function, allows access to the item directly and then we can access attributes (such as a special attribute in the HTML to wire the cookies to). I used tab id, and then defaulted to self naming if the attribute doesn't exist.

// wireup tabs
$(".tabs").each(function() {
    var tabid = $(this).attr("tabid");
    if (tabid == undefined || tabid == null || tabid == "") {
        $(this).tabs({
            cookie: {
                expires: 30
            }
        });
    }
    else {
        $(this).tabs({
            cookie: {
                expires: 30,
                name: tabid
            }
        });
    }
});