jquery - Javascript cookie show/hide onclick -

i have problem javascript cookie. script not work correctly. code works when delete cookie settings.

html part: hide/show div

<div id="toolo">      text 1     <button id="hide">open</button>            </div> <div id="toolo2">     text 2     <button id="show">hide</button> </div> 

javascript code: want on page load show div "toolo", when user hides div "tolo", show div "toolo2".

// if open div cookie if($.cookie('state') == 'open'){     $("#toolo").show();     $("#toolo2").hide(); }  // if close div cookie else if ($.cookie('state') == 'closed') {     $("#toolo").hide();     $("#toolo2").show(); } //firs time page loading     else {       $("#toolo2").hide();   }    // hide button  $("#hide").click(function(){     $("#toolo").hide();     $("#toolo2").show();     $.cookie('state', 'open', { expires:3 });     return false;   }); // show button $("#show").click(function(){     $("#toolo").show();     $("#toolo2").hide();        $.cookie('state', 'closed', { expires:3 })     return false; }); 

http://jsfiddle.net/h1foecn7/17/

it seems not setting cookies.

see updated fiddle:

http://jsfiddle.net/h1foecn7/18/

include jquery-cookie.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> 

set cookie

   // onload js $.cookie('state', 'closed');