Question

How could i keep a div hidden after the user goes to another page or refreshes the page? I have the following code in the footer so it loads on every page:

$(document).ready(function() {
 $('#clickmebottom').click(function() {
      $('#bottomfixtab').animate({
           height: 'toggle'
           }, 350
      );
 });
});

#clickmebottom is an X button that – on click – hides the #bottomfixtab div (small fixed banner at bottom of screen)

Thanks for the help

Answer 1

You can use a jQuery plugin such as jquery-cookie to simplify cookie access. So your code would become something like this to save the div’s toggle setting:

// pseudo-code, you'll want to check the actual syntax
$(document).ready(function() {

  // see if the cookie is set, if it is, hide the div
  if ( $.cookie('toggledDiv' ) {
    $('#bottomfixtab').hide();
  }
  $('#clickmebottom').click(function() {
    $.cookie('toggledDiv');
    $('#bottomfixtab').animate({
      height: 'toggle'
    }, 350 );
  });
});

this will probably make the div flash then hide so if you want to avoid that flash, set the default to display: none, then if the cookie is not set, show the div:

// again, pseduo-code
if ( !$.cookie('toggledDiv') ) {
  $('#bottomfixtab').show()
}