Question

I have one collapse menu. in that I used cookie to store it’s value, First I used Class but that is not working properly so I used that with id.

In this when I got Id so it will display it’s next div visible.

This is my Fiddle

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

var widget2 = $(".widget2");
var box2 = $(".box2");
if (getCookie('box2cooki')) {
   // alert(getCookie('box2cooki'));
    var id = getCookie('box2cooki');
    id = $(".box2").attr('id');
     alert(id);
    //alert(Element);
    //alert(box2ID);
    //$(".box2").next(".widget2").slideDown(200);
   }
else {
    alert("hiiiiiii");
}

widget2.hide();
box2.click(function() {
    $(this).next(widget2).slideToggle(200);
    var box2ID = $(this).attr('id');
    setCookie('box2cooki', box2ID);
    //alert(box2ID);
    });
    $(".inner").hide();
    $(".box").click(function() {
        $(this).next(".inner").slideToggle(200);
    });

    //alert(box2ID);
});
<div class="box2" id="1"><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><div class="box2" id="2"><h3>Tennis</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 Open</a></li>
</ul>
<div class="clear-both"></div>
</div></div>
</div>

​
​

Answer 1

I solved this problem and it’s live demo is given here.