jQuery slideToggle()

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

jQuery slideToggle()

Post 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/
- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
User avatar
phazorRise
Forum Contributor
Posts: 134
Joined: Mon Dec 27, 2010 7:58 am

Re: jQuery slideToggle()

Post 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.
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

Re: jQuery slideToggle()

Post by Pazuzu156 »

Hmm, good idea, I'll give that a try.
- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

Re: jQuery slideToggle()

Post 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.
- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
Post Reply