0

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>​
3
Contributors
15
Replies
17
Views
5 Years
Discussion Span
Last Post by wasim kazi
Featured Replies
  • 1

    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](https://code.google.com/p/cookies/). Read More

  • I solved this problem. Thanks to all for your quick replay. This is my final script. [Click Here](http://jsfiddle.net/wasimkazi/BjfsJ/1/) Read More

0

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.

1

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.

Edited by pritaeas

0

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

0

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.

0

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?

Edited by wasim kazi

0

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.

0

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>
0

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

});

​

Edited by wasim kazi

0

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.

Edited by wasim kazi

0

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.