CODEWITHSUNDEEP
javascriptcookies
user1919802
user1919802

Reputation: 7

css javascript cookie to remember div toggle state

I am fairly new to javascript and seem to be having trouble with cookies. I have found a lot of posts with similar questions but as I start reading the answers I get more and more confused. I have even tried to follow along with youtube tuorials but can't seem to find someone who explains it properly. I have been stuck on this for the last 3 hours and I cannot give up now.

I have a div which can be toggled to be either visible or not. I am using a javascript function for this.

function exp_col(x, y){
 x = document.getElementById(x);
 y = document.getElementById(y);

if (x.style.display == "block") {
    x.style.display = "none";
    y.src = "images/layout/plus.png";
} else {
    x.style.display = "block";
    y.src = "images/layout/minus.png";
}}

When a user toggles a div, I want to be able to remember that and keep the state of the div the same even if they go on to a different page. I've been told I need cookies for this but I can't seem to make one that works. I'm not sure if I even understand them properly. I know they store information in pairs like name-value but I don't understand how to use this to do what I want. Where do I set the cookie? How do I set it? How do I use it to do what I want? I'm just really confused at the moment and would appreciate some help.

Live example of toggle @ http://hello-world.cu.cc

Thanks

Upvotes: 0

Views: 3758

Answers (2)

Ruslan Polutsygan
Ruslan Polutsygan

Reputation: 4461

here is rought example of what you probably need

<html>
<head>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
   <script type="text/javascript" src="jquery.cookie.js"></script>
    <script type="text/javascript">
        $(function(){
            var toggle=$('.toggle');
            var inner=toggle.find('.inner');
            if($.cookie('divState')=='visible')
                inner.show();
            else
                inner.hide();
            toggle.find('a').click(function(){
                if(inner.is(':visible'))
                    $.cookie('divState', 'hidden');
                else
                    $.cookie('divState', 'visible');
                inner.toggle();
            });
        });
    </script>
    <style type="text/css">
        div
        {
            padding: 2px;
            border: 1px solid #ccc; width: 300px
        }
    </style>
</head>
<body>
    <div class="toggle">
        <a>Click me</a>
        <div class="inner">
            Some text <br />
            Some text <br />
            Some text <br />
            Some text <br />
            Some text <br />
            Some text <br />

        </div>
    </div>
</body>
</html>

click on "click me" and upadte the page several times - you will se that div state is remembered. it is stored in cookies.

I used jquery if don't mind. What I tried to show is just workflow. If you can't use jquery it's pretty easy to convert example into native javascript.

live demo - http://jsfiddle.net/CQFJ4/

I hope this is helpful.

Upvotes: 1

CM Kanode
CM Kanode

Reputation: 1436

Setting a cookie is straightforward:

document.cookie="mydiv=block";

And you can go here for examples on reading and erasing cookies: http://www.quirksmode.org/js/cookies.html

Upvotes: 0

Related Questions