CODEWITHSUNDEEP
javascriptjqueryhtmlcsscookies
Matthew_M123
Matthew_M123

Reputation: 23

How do I use cookies with content displayed by on click events? (HTML/CSS/jQuery)

I am having trouble finding a solution to a problem that involves the use of cookies. The basic idea is that when a user clicks a tab a jQuery on click event is triggered and the content displayed below changes. Is it possible to store the latest state of the page once the page is refreshed?

The HTML code is displayed below

<ul>
   <li id='column1'><a href='#' class='current'>column1</a></li>
   <li id='column2'><a href='#'>column2</a></li>
   <li id='column3'><a href='#'>column3</a></li>
</ul>

<div id='displayContent'>
*Content displayed here*
</div>

The jQuery Code is displayed below

$("#column1").click(function(){
    $("#column3").hide();
    $("#column2").hide();
    $("#column1").css("display", 'block');
    $("#column3 a").removeClass();
    $("#column2 a").removeClass();
    $("#column1 a").addClass("current");
});

So basically how it works is that when you click a column the content for the desired selection is displayed and the 'current' class is added to the selection. I need to find a solution to how I can get the browser to remember which column was clicked last so that when the page is refreshed it remembers the last column.

Thanks!

UPDATES - JQUERY CODE

Ok, so downloaded and added the cookie plugin to my folders and have it setup. I have now changed my jQuery code to the following code

$("#column1").click(function(){
    $("#column3Content").hide();
    $("#column2Content").hide();
    $("#column1Content").css("display", 'block');
    $("#column3 a").removeClass();
    $("#column2 a").removeClass();
    $("#column1 a").addClass("current");

    $.cookie("column1", 1);
    $.removeCookie("column2");
    $.removeCookie("column3");
});

var cookieVal = $.cookie("column1");
if ( cookieVal == 1) 
{
  $("#column3Content").hide();
  $("#column2Content").hide();
  $("#column1Content").css("display", 'block');
  $("#column3 a").removeClass();
  $("#column2 a").removeClass();
  $("#column1 a").addClass("current");
}

It now remembers which column was last clicked, yay! Unfortunately when it checks which cookie is present it doesn't seem to add the 'current' class back in, which is used to change colour of selected column, any ideas?

Upvotes: 1

Views: 62

Answers (1)

Philipp Braun
Philipp Braun

Reputation: 1573

How do I set/unset cookie with jQuery?

To get started just see the link above. Simply create a cookie and read the value.

$.cookie("jar", 1);
var cookieVal = $.cookie("jar");
$.removeCookie("jar");

UPDATE

$("#column1").click(function(){
    $("#column3").hide();
    $("#column2").hide();
    $("#column1").css("display", 'block');
    $("#column3 a").removeClass();
    $("#column2 a").removeClass();
    $("#column1 a").addClass("current");

    $.cookie("column1", 1);

});

var cookieVal = $.cookie("column1");
if ( cookieVal == 1 ) 
{
    $("#column3").hide();
    $("#column2").hide();
    $("#column1").css("display", 'block');
    $("#column3 a").removeClass();
    $("#column2 a").removeClass();
    $("#column1 a").addClass("current");
}

Upvotes: 1

Related Questions