jquery cookie set css to display: none -

i'm using jquery cookie plugin , i'm trying have browser remember state of css after refresh, here's code when button clicked:

    $('#cartholder').attr('style','display: none !important');     $.cookie("cartdisplay", 'none !important'); 

then in header have:

   if ($.cookie("cartdisplay")){        $('#cartholder').attr('style', $.cookie("cartdisplay"));    } 

the problem is, after each refresh displayproperty still reset it's default property. in console window see jquery cookie has stored necessary value, it's not being written dom after each refresh.

any 1 able me out?

thanks

should not use attr('style') override styles. use .css instead. try avoiding !important. try

$('#cartholder').css('display','none'); $.cookie("cartdisplay", 'none'); 

in header.

$(document).ready(function(){     if ($.cookie("cartdisplay")){            $('#cartholder').css('display', $.cookie("cartdisplay"));        } }); 

or use .toggle

$('#cartholder').hide(); $.cookie("cartdisplay", 'false'); 

in header.

$(document).ready(function(){     if ($.cookie("cartdisplay")){            $('#cartholder').toggle($.cookie("cartdisplay"));        } }); 

remember wrap code inside $(document).ready(function(){ ensure dom elements have been loaded