Setting cookie values with jquery and slidetoggle

StackOverflow https://stackoverflow.com/questions/17452688

  •  02-06-2022
  •  | 
  •  

Question

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>
Was it helpful?

Solution

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
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top