javascript toggle div keep as it is after page refresh or change

[wasim kazi]

I have one menu toggle div manu which is slide up and down. For that I used jquery.Cookie plugin but still it's not working.
here is my problem : http://jsfiddle.net/wasimkazi/fauNg/10/
please help me...

    $(document).ready(function() {

        $(".widget2").hide();
        var $widget2 = $(".widget2");
        readCookie('widget2') === 'open' ? $widget2.show() : $widget2.hide();
        $(".box2").toggle(function() {
            $(this).next(".widget2").slideDown(200);
            setCookie('widget2', 'open', 1);
        }, function() {
            $(this).next(".widget2").slideUp(200);
            setCookie('widget2', 'close', 1);
        });

        var $inner = $(".inner");
        readCookie('inner') === 'open' ? $inner.show() : $inner.hide();
        $(".box").toggle(function() {
            $(this).next(".inner").slideDown(200);
            setCookie('inner', 'open', 1);
        }, function() {
            $(this).next(".inner").slideUp(200);
            setCookie('inner', 'close', 1);
        });

    });

    function setCookie(name, value, days) {
        if (days
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            var expires = "; expires=" + date.toGMTString();
        }
        else var expires = "";
        document.cookie = name + "=" + value + expires + "; path=/";
    }

    function readCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
        }
        return null;
    }​

<div class="box2"><h3>Tennis</h3>
</div>
<div class="widget2" style="display: none; "><div class="widget"><div class="box"><h3>Australia</h3></div>
        <div class="inner" style="display: none; ">
            <ul class="leagues">
                                    <li class="even">Australian Open M.</li>
                            </ul>
            <div class="clear-both"></div>
        </div></div>
</div>
<div class="box2"><h3>Basketball</h3>
</div>
<div class="widget2" style="display: block; "><div class="widget"><div class="box"><h3>Australia</h3></div>
        <div class="inner" style="display: block; ">
            <ul class="leagues">
                                    <li class="even"><a href="#" class="league-145">Australian NBL</a></li>
                            </ul>
            <div class="clear-both"></div>
        </div></div>
</div>​

[pritaeas]

Line 27 is incorrect. Close the parenthesis and add a curly bracket.

[wasim kazi]

Thanks for your replay pritaeas. I made some stupid typo mistakes but that I make correct still it's not working. Check hereClick Here. I made one demo.

[pritaeas]

Check your cookie functions. The read appears to always return null, so I think the set doesn't work as expected.

Here's a library.

[wasim kazi]

ya I check it and but now into that whatever div I select so i get all class open and close. I made few changes also in my code.

please check here

[pritaeas]

Because both are using widget2 as class.

[wasim kazi]

Ya you are right both are using same class but I want that when I click on first box and refresh that page so only that first box should be open not all box of widget2.
Now here I'm bit confused that how can i saw that selected output after page refresh or change.

[pritaeas]

Give them unique ID's or classes, and store each div separately.

[wasim kazi]

That's not possible because that all output are ganrate in loop. so that's why I have to keep as it is and make some changes.
it's all most done now I just call that current div which is clicked previously.
There is no way to call that current div?

[pritaeas]

Save it's position too, then you can call a specific one. If you don't, there's no way to make the distinction between them.

[wasim kazi]

I am keep trying save it's state also but still it's not working,
is there any way to save that div's state.

http://jsfiddle.net/wasimkazi/fauNg/25/

[ko ko]

Here is my script and markup with your getCookie and setCookie functions. It does work properly.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title> - jsFiddle demo by wasimkazi</title>
    <style type="text/css">
    <!--
    body {
        color: #171717;
        font: 11pt/14pt Arial, Tahoma, Sans-serif;
    }
    h3 {
        font-size: 11pt;
        margin: 0 0 10px;
        padding: 0;
    }
    p {
        margin: 0;
    }
    #boxes {
        margin: 2em;
        width: 300px;
    }
    .button {
        background: #f2f2f2;
        border: 1px solid #aaaaaa;
    }
    .button span {
        cursor: pointer;
        display: block;
        font-weight: bold;
        padding: 0.4em 1em;
    }
    .box {
        border-color: #aaaaaa;
        border-style: none solid solid;
        border-width: 1px;
        display: none;
        margin-bottom: 1em;
        padding: 1em;
    }
    -->
    </style>
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
    <script type='text/javascript'>//<![CDATA[ 
    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);
            }
        }
    };
    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;
    };
    $(document).ready(function(){

        if(getCookie('openbox'))
        {
            $('#' + getCookie('openbox')).slideDown('fast');
        }

        $('.button').click(function(o){
            var obj = $(this);
            $('.box').slideUp('fast', function(){
                $(obj).next('.box').slideDown('fast');
                var openBoxID = $(obj).next('.box').attr('id');
                setCookie('openbox', openBoxID);
            });
        })
    });
//]]>  
</script>
</head>
<body>
    <div id="boxes">
        <div class="button"><span>Box 1</span></div>
        <div class="box" id="box1">
            <h3>Box 1</h3>
            <p>Box 1 content.</p>
        </div>
        <div class="button"><span>Box 2</span></div>
        <div class="box" id="box2">
            <h3>Box 2</h3>
            <p>Box 2 content.</p>
        </div>
    </div>
</body>
</html>

[wasim kazi]

Thanxs for your replay zero13.
Accroding your new script I add Id in my div box2. and make some changes in my script still it's not working. here is my script and live demo
when I call $('#'+ getCookie('box2')).attr('id').hide(); this line in my script. my program stop working.
now please let me know how we call current ID of this current DIV.

$(document).ready(function(){

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);
            }
        }
    }

 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;
    }


 if(getCookie('box2'))
  {
    $('#'+ getCookie('box2')).attr('id').hide();
     alert("hi"); 
  }
    else{
        alert("hiiiiiii");    
    }


    var $widget2=$(".widget2");
    $widget2.hide();
    $(".box2").toggle(function(){
        $(this).next(".widget2").slideDown(200);
       }, function(){
        $(this).next(".widget2").slideUp(200);
        var openBoxID = $(this).attr('id');
        setCookie('box2', openBoxID); 
      });

    $(".inner").hide();
    $(".box").toggle(function(){
        $(this).next(".inner").slideDown(200);
    }, function(){
        $(this).next(".inner").slideUp(200);
    });

});

​

[wasim kazi]

Hello zero13.. I made one more fiddle which run your script. In this I found that same output which I get previously. when I refresh that page so it will open all box not the last selected box.

please check here

In this page go to result window and right click and select the "relode frame" option. so it will show you the exact problem.

[ko ko]

Remove your scripts and just check mine, and then, alter those codes according to your needs. You've wrong syntax and also I can't tell without seeing your HTML.

[wasim kazi]

I solved this problem.
Thanks to all for your quick replay.
This is my final script. Click Here