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.