How to set cookie in jquery using toggle ()

Question

You are looking for a cookie that will be set when the user clicks on the link, he will open the div, then the user will be able to refresh the page and see that the div is still open.

======= ======= HTML

<a class="show-settings" href="#"></a> 

======== jQuery =======

 $(function () { //Toggle Settings var s = $("a.show-settings"); //On click to toggle settings s.click(function () { $("#s4-ribbonrow, #s4-titlerow").toggle(); }); //Add/Remove text s.toggle(function () { //$(this).text("Hide Settings"); }, function () { //$(this).text("Show Settings"); }); 

Answer 1

Something like this with jquery cookies and a callback function from switch mode

 $(document).ready(function() { SetView(); $('.show-settings').click(function() { $('#s4-ribbonrow, #s4-titlerow').toggle(0, function(){$.cookie('show-settings', $("#s4-ribbonrow:visible")}); }); function SetView() { if ($.cookie('loginScreen') == 'true') $('#s4-ribbonrow, #s4-titlerow').show(); } } 

Answer 2

I used this jQuery plugin before it is reliable enough for almost the same purpose. It is very lightweight and the documentation for it is quite simple.

So you might have something like this:

 // This is assuming the two elements are hidden by default if($.cookie('myCookie') === 'on') $("#s4-ribbonrow, #s4-titlerow").show(); s.click(function () { $("#s4-ribbonrow, #s4-titlerow").toggle(); // Toggle cookie value if($.cookie('myCookie') === 'on') $.cookie('myCookie', 'off'); else $.cookie('myCookie', 'on'); }); 

Answer 3

To do this, you will need a jQuery cookie .

 $(function() { var $s = $("a.show-settings"); //On click to toggle settings $s.click(function() { var text = $(this).text(); $("#s4-ribbonrow, #s4-titlerow").toggle(); if(text === 'Show Settings') { $s.text('Hide Settings'); $.cookie('is-hidden', null); // remove cookie }else { $s.text('Show Settings'); $.cookie('is-hidden', 'hidden'); // set cookie } return false; }); if($.cookie('is-hidden')) { // If cookie exists $("#s4-ribbonrow, #s4-titlerow").hide(); $s.text('Show Settings'); } }); 

HTML (assuming settings are displayed by default)

 <a class="show-settings" href="#">Hide Settings</a>