Page 1 of 1

jQuery slideToggle()

Posted: Mon Mar 07, 2011 8:32 am
by Pazuzu156
I have the slide toggle working:

Code: Select all

$(document).ready(function() {
  $('#sign').click(function() {
    $('#panel').slideToggle('slow');
  });
});
What i need is when the user clicks the button to how the hidden div, if the page refreshes, I want the div to still show, because it remembers the user had clicked it. If you need an example, here you go:

http://jae-entertainment.we.bs/JAEGuestbook/

Re: jQuery slideToggle()

Posted: Sun Mar 13, 2011 4:44 am
by phazorRise
I guess, to do that you need a persistant way. You can use cookies. Update the current positions,visibility of element into cookies. Because though you're changing styles in script ,when page refreshes element is assigned with default styles.

Re: jQuery slideToggle()

Posted: Mon Mar 14, 2011 7:34 am
by Pazuzu156
Hmm, good idea, I'll give that a try.

Re: jQuery slideToggle()

Posted: Sun Mar 20, 2011 12:48 pm
by Pazuzu156
I added cookies to it, using jQuery's cookie plugin:

Code: Select all

$(document).ready(function() {
  //set vars for the div elements
  var signExp = $('#signExpand');
  var signCol = $('#signCollapse');
  var panel = $('#panel');
  
  //when signExp is clicked, hide it, show signCol, and slideToggle down panel, and set cookie
  signExp.click(function() {
    signExp.css("display","none");
    signCol.css("display","block");
    panel.css("display","block");
    //set cookie = 'expanded'
    $.cookie('expCol','expanded');
  });
  
  //when signCol is clicked, hide it, show signExp, and slideToggle up panel, and set cookie
  signCol.click(function() {
    signExp.css("display","block");
    signCol.css("display","none");
    panel.css("display","none");
    //set cookie = 'collapsed'
    $.cookie('expCol','collapsed');
  });
  
  //set var for cookie
  var expCol = $.cookie('expCol');
  //when cookie is set for expanded, show all in signExp.click function
  if(expCol=='expanded') {
    signExp.css("display","none");
    signCol.css("display","block");
    panel.css("display","block");
  };
});
In reality, this was a very simple task. But thanks for your help.