Jquery tabs cookie use existing script

Question

May be this is not so hard to do but no from JS background so hard to understand for me. I am trying to store selected tab in cookie so if page refreshed still it will display selected tab earlier.

I am already using list grid layout for my website and also have cookie set and works fine. I am posting cookie code I am using for that as well as my tabs html and javascript too.

List/Grid Cookie JS

    $(function() {
        var cc = $.cookie('list_grid');
        if (cc == 'g') {
            $('#listgrid').addClass('grid');
            $('#grid').addClass('current');            
        } else {
            $('#listgrid').removeClass('grid');
            $('#list').addClass('current');
        }
    });

$(document).ready(function() {

    $('#grid').click(function() {
        $(".current").removeClass("current");
        $(this).addClass("current");

        $('#listgrid').fadeOut(500, function() {
            $(this).addClass('grid').fadeIn(500);
            $.cookie('list_grid', 'g');
        });
        return false;
    });

    $('#list').click(function() {
        $(".current").removeClass("current");
        $(this).addClass("current");

        $('#listgrid').fadeOut(500, function() {
            $(this).removeClass('grid').fadeIn(500);
            $.cookie('list_grid', null);
        });
        return false;
    });

});

My Tabs HTML

Tab 1

Tab 2

Tab 3

<div class="tabs">

    <div id="tab1" class="tab">
    </div>

    <div id="tab2" class="tab">
    </div>

    <div id="tab3" class="tab">
    </div>
</div>

Tabs JS jQuery(document).ready(function () { //if this is not the first tab, hide it jQuery(".tab:not(:first)").hide();

    //to fix u know who
    jQuery(".tab:first").show();

    //when we click one of the tabs
    jQuery(".htabs a").click(function () {

        $(".current").removeClass("current");
        $(this).addClass("current");

        //get the ID of the element we need to show
        stringref = jQuery(this).attr("href").split('#')[1];
        //hide the tabs that doesn't match the ID
        jQuery('.tab:not(#' + stringref + ')').hide();
        //fix
        if (jQuery.browser.msie && jQuery.browser.version.substr(0, 3) == "6.0") {
            jQuery('.tab#' + stringref).show();
        } else
        //display our tab fading it in
        jQuery('.tab#' + stringref).fadeIn();
        //stay with me
        return false;

    });

});

So can anyone please help me to do this.

Answer 1

I think your better off using the jquery ui tabs for this

jQuery(document).ready(function () { 

// get the cookie
 var tabcookie = $.cookie('tab');    
 if (tabcookie){
     jQuery('.tab:not(#' + tabcookie + ')').hide();
     jQuery('.tab#' + tabcookie ).show();    
 }else{
      jQuery(".tab:not(:first)").hide();

    //to fix u know who
    jQuery(".tab:first").show();
 }


//when we click one of the tabs
jQuery(".htabs a").click(function () {

    $(".current").removeClass("current");
    $(this).addClass("current");

    //get the ID of the element we need to show
    stringref = jQuery(this).attr("href").split('#')[1];        
    //hide the tabs that doesn't match the ID
    jQuery('.tab:not(#' + stringref + ')').hide();

    // save the cookie
    $.cookie('tab', stringref);


    //fix
    if (jQuery.browser.msie && jQuery.browser.version.substr(0, 3) == "6.0") {
        jQuery('.tab#' + stringref).show();
    } else
    //display our tab fading it in
    jQuery('.tab#' + stringref).fadeIn();
    //stay with me
    return false;

});

});​