I have simple toggle (button switch) function here, but I don't know how to add cookie and how to remember position when users clicks on button.

Anyone can help me to add cookie here ?

$(document).ready(function(){ 
 $("a.switch_thumb").toggle(function(){
  $(this).addClass("swap"); 
  $("ul.display").fadeOut(100, function() {
  $(this).fadeIn(100).addClass("thumb_view"); 
     });
  },

function () {
 $(this).removeClass("swap");
 $("ul.display").fadeOut(100, function() {
 $(this).fadeIn(110).removeClass("thumb_view");
    });

}); 
});

Im read about jqury cookie plugin but i have no idea how to implementing here...

Google is your friend...

Cookies in javascript: http://www.w3schools.com/js/js_cookies.asp
Or, if you want to use jQuery, I found this plugin: https://github.com/carhartl/jquery-cookie

Aha, now I saw your comment that you've already found the plugin...
I think it's explained fairly easily.

When you want to create a cookie (or update it's value) you use $.cookie('the_cookie', 'the_value');

The name of the cookie could i.e. be something with the element's id in it (so give all the elements an id if you havn't already). Something like this

$(document).ready(function(){ 
        $("a.switch_thumb").toggle(
        function(){
                $(this).addClass("swap"); 
                $("ul.display").fadeOut(100, function() {
                        $(this).fadeIn(100).addClass("thumb_view"); 
                });
                var name = "menu_cookie_" + $(this).attr("id");
                $.cookie(name, "open");
        },

        function () {
                 $(this).removeClass("swap");
                 $("ul.display").fadeOut(100, function() {
                         $(this).fadeIn(110).removeClass("thumb_view");
                });
                var name = "menu_cookie_" + $(this).attr("id");
                $.cookie(name, "closed");
        }); 
});

This will create session cookies, which means that they will be destroyed when you close the browser. To set cookies with an absolute termination time, use this instead

$.cookie(name, 'value', { expires: 7 }); // cookie exists for 7 days

And, if you want the cookie the be valid for the entire site (rather than just that one page) use this instead

$.cookie(name, 'value', { expires: 7, path: '/' });

Originally Posted by lizciz

Aha, now I saw your comment that you've already found the plugin...
I think it's explained fairly easily.

When you want to create a cookie (or update it's value) you use $.cookie('the_cookie', 'the_value');

The name of the cookie could i.e. be something with the element's id in it (so give all the elements an id if you havn't already). Something like this

$(document).ready(function(){ 
        $("a.switch_thumb").toggle(
        function(){
                $(this).addClass("swap"); 
                $("ul.display").fadeOut(100, function() {
                        $(this).fadeIn(100).addClass("thumb_view"); 
                });
                var name = "menu_cookie_" + $(this).attr("id");
                $.cookie(name, "open");
        },

        function () {
                 $(this).removeClass("swap");
                 $("ul.display").fadeOut(100, function() {
                         $(this).fadeIn(110).removeClass("thumb_view");
                });
                var name = "menu_cookie_" + $(this).attr("id");
                $.cookie(name, "closed");
        }); 
});

This will create session cookies, which means that they will be destroyed when you close the browser. To set cookies with an absolute termination time, use this instead

$.cookie(name, 'value', { expires: 7 }); // cookie exists for 7 days

And, if you want the cookie the be valid for the entire site (rather than just that one page) use this instead

$.cookie(name, 'value', { expires: 7, path: '/' });

Hello @lizciz this not work for me... dont know why..

Are you sure? Did you explicitly check if it sets any cookie values or not? Because the code I supplied above only sets the cookies, it does not use them in any way.

I'm guessing you want the toggled element to keep it's status if the page is reloaded? That means you'll have to actually read the cookie value, check if it's set to 'open', and if it is then toggle the element, once the page has loaded.

Also, just to be sure, did you actually download the plugin and include it in your page?

Im fix problem...

This works fine

$(document).ready(function(){ 
	var kuki = $.cookie("toogle");
	if(kuki == 'list') {
		$('ul.display').addClass('thumb_view');
		$("a.switch_thumb").addClass("swap");
	}
	else if(kuki == 'thumb') { 
		$('ul.display').removeClass('thumb_view');
		$("a.switch_thumb").removeClass("swap");
	}
	else { $("a.switch_thumb").removeClass("swap");}
	$("a.switch_thumb").click(function(){
		var kuki = $.cookie("toogle");
		if(kuki == 'thumb') {
			$('ul.display').addClass('thumb_view');
			$(this).addClass("swap");
			$.cookie("toogle", 'list', { expires: 7 });
		}
		else if(kuki == 'list'){ 
			$('ul.display').removeClass('thumb_view');
			$(this).removeClass("swap");
			$.cookie("toogle", 'thumb', { expires: 7 });
		}
		else {
			$('ul.display').addClass('thumb_view');
			$(this).addClass("swap");
			$.cookie("toogle", 'list', { expires: 7 });
		}
	});
 });