Unexpected state switching with jquery toggle() and $.cookie()

Question

Clicking the more/prev button works fine. Even when refreshing the browser the $.cookie() is doing a good job maintaining the state. But when I click the thumbnails some images confuse the cookie and thus the page acts as if the more/prev button was clicked. Please help if you can. And other tips are appreciated.

Wordpress HTML:

<div id="fp" class="gal">
  <h4>Recent Work</h4>
  [gallery columns="4" ids="7,8,187,6,9,10"]
  <h4>7 Deadly Sinners and The 7 Heaven Sent</h4>
  [gallery columns="4" ids="11,12,13,14,15,16,17,18,19,20,21,22,23,24"]
</div>

<div id="sp" class="gal">
 <h4>The Book Of Eye Characters</h4>
 [gallery columns="4" link="post" ids="26,27,28,29,30,31,32,33,34,25"]
</div>

JQuery:

<script src="<?php echo TEMPPATH;?>/scripts/jquery.cookie.js"></script>
<script>

$(document).ready(function () {
    $('<span id="more" class="paging">more</span>').insertAfter('#this');
    if ($.cookie("page1") == "n") {
        $("#fp").hide();
    } else {
        $("#sp").hide();
    }
    $("#more").click(function () {
        $(".gal").toggle("slow", function () {
            if ($('#fp').is(":visible")) {
                $.cookie("page1", "y");
                $('#more').html("more");
            } else {
                $.cookie("page1", "n");
                $('#more').html("prev");
            }
        });
    });
});
</script>

Answer 1

I think that the problem is in your cookie creation. When you're creating the cookie, add { path: '/' }, like this

$.cookie('page1', 'y', { path: '/' });

So the cookie will be across the entire site and not per page, like its default behavior.