CODEWITHSUNDEEP
javascriptjqueryhtmlcookies
John the Painter
John the Painter

Reputation: 2615

jquery slideUp/slideDown cookie

I have an open div on my site, a welcome message, which has a slideUp/slideDown toggle, so the user can click 'Close' and it slides up the div. However, everytime you land on this page, it's open... and I'd like to apply a cookie to this so if the user presses the slideUp toggle, it adds a cookie and keeps it at display:none.

Here is my jQuery code so far... and I'm hoping to use the cookie plugin which might make things easier?

var welcome_active = false;
$('.welcome-container .trigger span').click(function() {
    if (!welcome_active) {
        $('.welcome-container .content').slideUp('slow', function() {});
        $(this).find('span').removeClass('ss-navigatedown');
        $(this).find('em').html('About');
        $(this).find('span').addClass('ss-navigateup');
        welcome_active = true;
        console.log('test');
    } else {
        $('.welcome-container .content').slideDown('slow', function() {});
        $(this).find('span').removeClass('ss-navigateup');
        $(this).find('em').html('Close');
        $(this).find('span').addClass('ss-navigatedown');
        welcome_active = false;
    }
});

Any ideas if this is possible?

Thanks

Upvotes: 0

Views: 347

Answers (2)

Trader
Trader

Reputation: 249

Should be something like this, using the cookie plugin you mentioned, but you can also use local storage if you don't have to support older browsers:

var welcome_active = false;
if($.cookie('welcome_active')=='1'){
  $('.welcome-container .content').slideUp('slow', function() {});
  $(this).find('span').removeClass('ss-navigatedown');
  $(this).find('em').html('About');
  $(this).find('span').addClass('ss-navigateup');
  welcome_active = true;
}
$('.welcome-container .trigger span').click(function() {
  if (!welcome_active) {
    $('.welcome-container .content').slideUp('slow', function() {});
    $(this).find('span').removeClass('ss-navigatedown');
    $(this).find('em').html('About');
    $(this).find('span').addClass('ss-navigateup');
    welcome_active = true;
    console.log('test');
    $.cookie('welcome_active', '1', { expires: 7 });
  } else {
    $('.welcome-container .content').slideDown('slow', function() {});
    $(this).find('span').removeClass('ss-navigateup');
    $(this).find('em').html('Close');
    $(this).find('span').addClass('ss-navigatedown');
    welcome_active = false;
    $.cookie('welcome_active', '0', { expires: 7 });
  }
});

Upvotes: 2

Maxdow
Maxdow

Reputation: 1006

You can add a cookie simply by editing document.cookie

ex : 

document.cookie="slideState=up";

Next you just have to read document.cookie and parse the string to get your value.

I suggest you to use localstorage it's simple and efficient and it has a very good compatibility

Upvotes: 0

Related Questions