javascript - How to remember show and hide div with cookie - Stack Overflow

admin管理员组

文章数量:1302342

I have HTML like :

<div id='mainleft-content'>content is visible</div>
<div id="expand-hidden">Button Expand +</div>

And I use Jquery to show/hide div like :

 $(document).ready(function () {
    $("#expand-hidden").click(function () {
        $("#mainleft-content").toggle();
    });
});

I want use cookie to remember the state of div is hide or show of visitors' manipulate.

How can I do it? Thank for your help.

See JSFIDDLE

I have HTML like :

<div id='mainleft-content'>content is visible</div>
<div id="expand-hidden">Button Expand +</div>

And I use Jquery to show/hide div like :

 $(document).ready(function () {
    $("#expand-hidden").click(function () {
        $("#mainleft-content").toggle();
    });
});

I want use cookie to remember the state of div is hide or show of visitors' manipulate.

How can I do it? Thank for your help.

See JSFIDDLE

• javascript
• jquery
• html
• css
• cookies

Share Follow asked Dec 25, 2013 at 7:35 Hai TienHai Tien 3,11788 gold badges3939 silver badges6262 bronze badges 1

• Thank for all suggestions. – Hai Tien Commented Dec 25, 2013 at 7:49

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Here is working fiddle

You may use is(":visible") for this purpose, it will return you whether div is visible or not:

if ( $("#mainleft-content").is(":visible") ){
   alert('its visible');
}
else{
   alert('div is hidden');
}

if you still need the cookies, you may add a function:

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}

and set the cookie:

$(document).ready(function () {
    $("#expand-hidden").click(function () {
        $("#mainleft-content").toggle();
        SetCookie("DivStateVisible", $("#mainleft-content").is(":visible"),5);
    });
});

with jQuery using jquery-cookie:

function setCookie(c_name, value, exdays) {
    $.cookie(c_name, value, { expires : exdays });
}

function getCookie(c_name) {
    return $.cookie(c_name);
}

Using http://plugins.jquery./cookie/

$(document).ready(function () {
    $("#mainleft-content").toggle(!!$.cookie("visible"));
    $("#expand-hidden").click(function () {
        $("#mainleft-content").toggle(function() { 
             $.cookie("visible", $("#mainleft-content").is(':visible') ? 1 : 0);
        });
    });
});

You can use plugin: https://github./carhartl/jquery-cookie

and just set states like

$.cookie("visible", 1);

本文标签： javascriptHow to remember show and hide div with cookieStack Overflow