Question

I have one sliding menu in which I slide some div.

In that after page refresh or change I want that menu’s state as it is so for that i used cookie.

In that cookie whatever value I get will affect whole class so my all child will appear on screen instead of that selected div.

I made one jsfiddle also for review. check here

function getCookie(c_name) {
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++) {
    x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
    y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
    x = x.replace(/^\s+|\s+$/g, "");
    if (x == c_name) {
        return unescape(y);
    }
   }
  }

function setCookie(c_name, value, exdays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays === null) ? "" : "; expires=" +  exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
}

var widget2 = $(".widget2"),
box2 = $(".box2");
var inner = $(".inner"),
box = $(".box");

widget2.hide();
inner.hide();


if(getCookie('box2') == 'on'){
widget2.show();
//alert('hi');
}else{
widget2.hide();
//alert('hiiiiii');
} 

if(getCookie('box') == 'on'){
//widget2.show();
inner.show();
alert('hi');
}else{
inner.hide();
//alert('hiiiiii');
}

box2.click(function() {
$(this).next(widget2).slideToggle("fast", function() {
var flag = ($(this).css("display") == 'none')?'off':'on';
  setCookie('box2', flag);
 });
});

var inner = $(".inner"),
box = $(".box");

box.click(function() {
$(this).next(inner).slideToggle("fast", function() {
var flag = ($(this).css("display") == 'none')?'off':'on';
setCookie('box', flag);
 });
});​ 

Answer 1

This one is working perfect now. demo

$(document).ready(function() {

$(".widget2").hide();
$(".inner").hide();

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays === null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

var widget2 = $(".widget2");
var box2 = $(".box2");
if (getCookie('box2cooki')) {
    var id = getCookie('box2cooki');
    //alert('#'+id);
  $('#' + id).next(widget2).slideDown(100);
  $('#' + id).closest('div').next().find('.inner').slideDown(100);
} else {
    $(".widget2").hide();
    $(".inner").hide();
}


box2.click(function() {
    $(this).next(widget2).slideToggle(200);
    var box2ID = $(this).attr('id');
    setCookie('box2cooki', box2ID);
    //alert(box2ID);
});
//$(".inner").hide();
$(".box").click(function() {
    $(this).next(".inner").slideToggle(200);
});

//alert(box2ID);
});​