CODEWITHSUNDEEP
jquerytogglejquery-cookie
Ben Iskander
Ben Iskander

Reputation: 616

Setting cookie values with jquery and slidetoggle

I'm using jquery's slideToggle and carhartl's cookie plugin (https://github.com/carhartl/jquery-cookie) to remember the state of whether a div is toggled open or not. I have it working and remembering the position, but I'd like to set a 1 day expiry time for the cookie rather than having it last until the end of session as default.

I can set the expiry time ok when the toggle state is open but as soon as it's closed I'm struggling to see where to set the expiry time. Can anyone help?

Thanks :-)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery.cookie.js"></script>
<style>
#billboardButton {
    background-color:#f1f1f1;
    color:#666;
    padding:3px;
    width:100px;
    cursor:pointer;
    text-align:center;
    margin:0 auto;
}
</style>
</head>
<body>
<script>
$(document).ready(function(){

    var cook= $.cookie('billboardStatus', 'true', {expires: 1});

    if(cook=='false') {

        $('#billboard').hide();

        $("#billboardButton").css("backgroundColor", "#e1e1e1").text('Open Ad');        

    } else {

    $('#billboard').show();

        $("#billboardButton").text('Close Ad');
    }

    $('#billboardButton').on('click', function() {

        $('#billboard').stop().slideToggle('normal', function(){

            $("#billboardButton").css("backgroundColor", $(this).is(':not(:visible)') ? "#e1e1e1" : "").text($(this).is(':visible') ? 'Close Ad' : 'Open Ad');

            $.cookie('billboardStatus', $(this).is(':visible'));

        });

    });

}); // End document ready
</script>
<div id="test" style="width:970px;margin:20px auto;">
    <div id="billboardButton">Close Ad</div>
    <div id='billboard' style='width:970px; height:250px;background-color:#0C9;'></div>
</div>
</body>
</html>

Upvotes: 0

Views: 538

Answers (1)

Ben Iskander
Ben Iskander

Reputation: 616

Found the answer myself :-)

I added an if exists statement to the beginning to check for the cookie, and also added managed to discover where to add the {expires: 1} parameter to the slideToggle code purely by chance.

$(document).ready(function(){


    if($.cookie('billboardStatus')) {

        var cook = $.cookie('billboardStatus');

    } else {

        var cook = $.cookie('billboardStatus', 'true', {expires: 1});

    }

    //var cook= $.cookie('billboardStatus');

    if(cook=='false') {

        $('#billboard').hide();

        $("#billboardButton").css("backgroundColor", "#e1e1e1").text('Open Ad');        

    } else {

    $('#billboard').show();

        $("#billboardButton").text('Close Ad');
    }

    $('#billboardButton').on('click', function() {

        $('#billboard').stop().slideToggle('normal', function(){

            $("#billboardButton").css("backgroundColor", $(this).is(':not(:visible)') ? "#e1e1e1" : "").text($(this).is(':visible') ? 'Close Ad' : 'Open Ad');

            $.cookie('billboardStatus', $(this).is(':visible'), {expires:1});

        });

    });

}); // End document ready

Upvotes: 1

Related Questions