jquery ui tabs no longer supporting cookie? now what?

Had the same issue bite me today. Here is what seems to work:

1. Use jquery.cookie plugin (https://github.com/carhartl/jquery-cookie) (This step is not necessary, but it makes the life easier dealing with cookies)

2. Use the following code fragment:

   $( ".selector" ).tabs({    active   : $.cookie('activetab'),    activate : function( event, ui ){        $.cookie( 'activetab', ui.newTab.index(),{            expires : 10        });    }});

This sets a cookie called "activetab" which expires after 10 days (refer to jquery.cookie documentation for more options) to remember the currently selected tab whenever any tab is clicked. This cookie is read at the initialization time to display the last saved tab. The first time the page is visited, the tabs will be collapsed.

Short, layout-independent way of doing this using localStorage:

$("#tabs").tabs({  active: localStorage.getItem("currentIdx"),  activate: function(event, ui) {      localStorage.setItem("currentIdx", $(this).tabs('option', 'active'));  }});

A layout-specific way of doing it using custom data attributes (possibly useful if the attribute values were to be used in some way elsewhere in your script).

jQuery UI:

$("#tabs").tabs({    active: localStorage.getItem("currentTabIndex"),    activate: function(event, ui) {        localStorage.setItem("currentTabIndex", ui.newPanel[0].dataset["tabIndex"]);    }});

Example HTML layout:

<div id="tabs">    <div id="tabs-1" data-tab-index="0">       tab 1 stuff...    </div>    <div id="tabs-2" data-tab-index="1">       tab 2 stuff...    </div>        <div id="tabs-3" data-tab-index="2">       tab 3 stuff...    </div></div>

event tabsactivate and then store to sessionStorage or localStorage.

$(function() {    var selectedTabId = sessionStorage.getItem("selectedTab");    selectedTabId = selectedTabId === null ? 0 : selectedTabId; //your default being 0    $("#tabs").tabs({        active: selectedTabId,        activate : function( event, ui ) {            selectedTabId = $("#tabs").tabs("option", "active");            sessionStorage.setItem("selectedTab", selectedTabId);        }    });});