CODEWITHSUNDEEP
javascriptjqueryhtmlcookies
aronsimt
aronsimt

Reputation: 25

Javascript cookie show/hide onclick

I have problem with Javascript cookie. My script does not work correctly. Code works only when I delete all 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: I want on page load to show div "toolo", but when user hides div "tolo", will show only 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/

Upvotes: 0

Views: 1802

Answers (4)

mplungjan
mplungjan

Reputation: 178413

Assuming you have jquery.js and jquery.cookie.js correctly installed, try this - I gave your show and hide buttons a class of toggle

FIDDLE

$(function() {
  var state = $.cookie('state');
  var open = state == "open";
  $("#toolo").toggle(open);
  $("#toolo2").toggle(!open);

  $(".toggle").on("click",function(e){
    e.preventDefault();
    var open = this.id=="show";
    $("#toolo").toggle(open);
    $("#toolo2").toggle(!open);
    $.cookie('state', open?"open":"closed", { expires:3 });
  });
});

Note that the snippet below will not run at SO but will run if you copy it to your server

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Demo by mplungjan</title>
  
  <script type='text/javascript' src='//code.jquery.com/jquery-2.1.3.js'></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    
  <script type='text/javascript'>


$(function() {
  var state = $.cookie('state');
  var open = state == "open";
  $("#toolo").toggle(open);
  $("#toolo2").toggle(!open);

  $(".toggle").on("click",function(e){
    e.preventDefault();
    var open = this.id=="show";
      console.log(open,this.id)
    $("#toolo").toggle(open);
    $("#toolo2").toggle(!open);
    $.cookie('state', open?"open":"closed", { expires:3 });
  });
});
</script>


</head>
<body>
  <div id="toolo"> text 1
   <button class="toggle" id="hide">Open</button>           
  </div>
  <div id="toolo2">
     text 2
    <button class="toggle" id="show">Hide</button>
  </div>
</body>
</html>

Upvotes: 0

Sougata Bose
Sougata Bose

Reputation: 31749

You need to use Jquery Cookie. Include it - 

https://github.com/js-cookie/js-cookie

After that it will work i hope.

Upvotes: 0

SharpEdge
SharpEdge

Reputation: 1762

You have made a little mess with names...try this ( tested in JSFiddle and working)

// if open div cookie
if($.cookie('state') == 'opened'){
  $("#toolo").show();
  $("#toolo2").hide();
} 
// if close div cookie
else if ($.cookie('state') == 'closed') {
  $("#toolo").hide();
  $("#toolo2").show();
}
//first time page loading    
else {  
  $("#toolo2").hide(); 
}

// hide button 
$("#hide").click(function(){
  $("#toolo").hide();
  $("#toolo2").show();
  $.cookie('state', 'closed', { expires:3 });
  return false;  
});
// show button
$("#show").click(function(){
  $("#toolo").show();
  $("#toolo2").hide();   
  $.cookie('state', 'opened', { expires:3 })
  return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

<div id="toolo"> 
  Text 1
  <button id="hide">Hide</button>           
</div>

 <div id="toolo2">
  Text 2
  <button id="show">Open</button>
</div>

Upvotes: 0

ZeroBased_IX
ZeroBased_IX

Reputation: 2727

It seems that you are not setting your 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 the cookie

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

Upvotes: 1

Related Questions