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

Recommended Answers

All 15 Replies

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

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.

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.

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

Because both are using widget2 as class.

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.

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

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?

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.

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>

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

});

​

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.

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.

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.