How to set a cookie in jquery using toggle()

Question

Looking for a cookie to be set when the user clicks on the link it'll open the div then the user can refresh the page and see 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");
});

roobeedeedada · Answer 1 · 2012-03-08T17:39:14.777

I've used this jQuery plugin before quite reliably for almost the exact same purpose. It's very light-weight and the documentation for it is pretty easy to follow.

So you could 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');
});

Hupperware · Accepted Answer · 2012-03-08T17:49:10.063

0

Something like this using jquery-cookies and the callback functionality from toggle

$(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();
 }
}

edited Mar 08 '12 at 17:49

answered Mar 08 '12 at 17:31

Hupperware

991
1
6
15

It was just hacked out on here... I didn't test that the syntax was 100%. That's the reason for the comment at the top to use cookies and the callback. – Hupperware Mar 08 '12 at 17:53
Is there anyway to not use a plugin? – Davis Mar 08 '12 at 18:01
1

No. You have to keep state. Your requirement says "it'll open the div then the user can refresh the page and see the div is still open"... that requires you keep state in a cookie or in a session as the web is inherently stateless. – Hupperware Mar 08 '12 at 18:03

shaunsantacruz · Answer 3 · 2012-03-08T17:39:16.153

0

You'll need jQuery cookie for this to work.

$(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 (assumes settings are shown by default)

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

edited Mar 08 '12 at 17:39

answered Mar 08 '12 at 17:33

shaunsantacruz

8,384
3
17
19

oops, I just realized the settings should be hidden by default. I can fix my answer if needed. – shaunsantacruz Mar 08 '12 at 17:47
This was the closest but, it was setting the cookie. – Davis Mar 08 '12 at 17:51
Still looking for the answer... Is there anyway to not use a plugin? – Davis Mar 08 '12 at 17:58
not sure what you mean by, 'it was setting a cookie'? Yes, you can use vanilla javascript to set cookies instead of the plugin. – shaunsantacruz Mar 08 '12 at 18:15

How to set a cookie in jquery using toggle()

3 Answers3

Linked