2012-06-07, 02:16 PM
let's take an example of a box. You want it to remain open by default but if the user closes it, it should remain close after refreshing.
Note: make sure you have included jQuery and jQuery cookies in your page
And if it's mybb, make sure you have this code before any jQuery code
Tip: never use the jquery shorthand "$" in your jQuery codes. Always use 'jQuery'
In this example, we will have a box and two buttons open/close
all the three explain themselves fully so i don't think i need to.
Markup : a simple box, an opened sate and a closed state button
// this code defines what happens when we click the open button
//the code below checks if the cookie named 'openclose' has the value 'closed'. If yes, it hides the close button + the box and shows the open button.
A working example. - http://jsfiddle.net/hKe4p/
Close the box and then hit 'run' again.
Note: make sure you have included jQuery and jQuery cookies in your page
And if it's mybb, make sure you have this code before any jQuery code
jQuery.noConflict();
^this prevents the jQuery conflict with prototypeTip: never use the jquery shorthand "$" in your jQuery codes. Always use 'jQuery'
In this example, we will have a box and two buttons open/close
all the three explain themselves fully so i don't think i need to.
Markup : a simple box, an opened sate and a closed state button
<a href="#" id="button_open">Open</a>
<a href="#" id="button_close">Close</a>
<div id="box">this is a box. </div>
jQuery('#button_open').hide(); //initially we keep the open button hidden
// this code defines what happens when we click the close buttonjQuery('#button_close').click(function () {
jQuery(this).hide(); //this hides the close button as the box is now closed
jQuery('#box').slideUp('fast'); //hides the box
jQuery('#button_open').show(); //shows the open button
jQuery.cookie("openclose","closed", {expires: 365}); // sets cookie
return false;
});
// this code defines what happens when we click the open button
jQuery("#button_open").click(function () {
jQuery(this).hide(); //hides the open button as the box is now open
jQuery('#box').slideDown('fast'); //shows the box
jQuery('#button_close').show(); //shows the close button
jQuery.cookie("openclose","open", {expires: 365}); //sets cookie
return false;
});
//the code below checks if the cookie named 'openclose' has the value 'closed'. If yes, it hides the close button + the box and shows the open button.
if(jQuery.cookie("openclose") == "closed") {
jQuery("#button_close").hide();
jQuery("#button_open").show();
jQuery('#box').hide();
};
A working example. - http://jsfiddle.net/hKe4p/
Close the box and then hit 'run' again.