I am using following a tutorial from here: http://www.shopdev.co.uk/blog/cookies-with-jquery-designing-collapsible-layouts/
This is the script I use:
<script type="text/javascript" language="javascript">
$(function() {
// SETUP:
// When the info banner is clicked:
$('#setup').click(function() {
$('#intro').css("display","none");
$.cookie('intro', 'collapsed');
});
// COOKIES
// Info banner state
var intro = $.cookie('intro');
// READ THE COOKIES
if (intro == 'collapsed') {
$('#intro').css("display","none");
};
});
</script>
The script hides the following div as the cookie is read:
<div class="feedback attention" id="intro">
Text goes here
<a id="setup" href="#">Ok I get it, please hide this</a>
</div>
Everything work great but when the page loads the div is shown for a split second. I guess the solution is to present two different pieces of markup serverside according to the cookie info. I have no idea how to go about this.
