设置cookie以记住隐藏的元素状态

我在设置cookie以记住某些元素是否已隐藏时遇到问题。我使用的脚本（来自这里的另一个答案）似乎可以隐藏或显示我试图控制的元素，但在重新加载/更改页面时，似乎无法"记住"当前状态。

在我目前正在开发的网站上，目前只有两个页面有这个代码：

http://www.emelisandetribute.com/music.php和http://www.emelisandetribute.com/videos.php

页面上使用的javascript（直接在标记之前）如下：

<script type="text/javascript">
function setCookie (name, value, expires, path, domain, secure) {
    document.cookie = name + "=" + escape(value) +
    ((expires) ? "; expires=" + expires : "") +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "");
}
function getCookie (name) {
    var cookie = " " + document.cookie;
    var search = " " + name + "=";
    var setStr = null;
    var offset = 0;
    var end = 0;
    if (cookie.length > 0) {
        offset = cookie.indexOf(search);
        if (offset != -1) {
            offset += search.length;
            end = cookie.indexOf(";", offset);
            if (end == -1) {
                end = cookie.length;
            }
            setStr = unescape(cookie.substring(offset, end));
        }
    }
    if (setStr == 'false') {
        setStr = false;
    } 
    if (setStr == 'true') {
        setStr = true;
    }
    if (setStr == 'null') {
        setStr = null;
    }
    return(setStr);
}
function hideFooter() {
    setCookie('footer_state', false); 
    document.getElementById('toggleoff').style.display = 'none';
    document.getElementById('toggleon').style.display = 'block';
    document.getElementById('footer1').style.display = 'none';
    document.getElementById('footer2').style.display = 'none';
    document.getElementById('footer3').style.display = 'none';
}
function showFooter() {
    setCookie('footer_state', null);
    document.getElementById('toggleoff').style.display = 'block';
    document.getElementById('toggleon').style.display = 'none';
    document.getElementById('footer1').style.display = 'block';
    document.getElementById('footer2').style.display = 'block';
    document.getElementById('footer3').style.display = 'block';
}
function checkFooter() {
    if (getCookie('footer_state') == null) { // if popup was not closed
        document.getElementById('toggleoff').style.display = 'block';
        document.getElementById('toggleon').style.display = 'none';
        document.getElementById('footer1').style.display = 'block';
        document.getElementById('footer2').style.display = 'block';
        document.getElementById('footer3').style.display = 'block';
    }   
}
</script>

相关元素的HTML是：

<div class="mainfooterwrapper">
    <span class="mainfootertoggle" id="toggleoff"><a href="#" onclick="hideFooter(); return false;">HIDE THIS</a></span>
    <span class="mainfootertoggle" id="toggleon" style="display:none"><a href="#" onclick="showFooter(); return false;">SHOW THIS</a></span>
    <div class="mainfooter1" id="footer1">
        <?php include "mainfooter1.php"; ?>
    </div>
    <div class="mainfooter2" id="footer2">
    <?php include "mainfooter4.php"; ?>
    </div>
    <div class="mainfooter3" id="footer3">
    <?php include "mainfooter3.php"; ?>
        <div style="clear:both; float:right; position:absolute; bottom:0; right:0; overflow:hidden; margin:5px 15px 5px 5px;">
        <?php include "footer.php"; ?>
        </div>
    </div>
</div>

通过阅读其他一些问题和答案，我尝试通过编辑CSS和将代码添加到HTML来添加所有元素，但这使元素完全消失。

我突然想到，我真正需要的是一段代码，当元素被用户隐藏时，它会创建一个cookie，但如果元素再次显示，它也会删除/修改cookie。我意识到，我现在拥有的（尽管工作不正常）是一个代码，它实际上有一个"ON"开关，但没有"OFF"开关。

如有任何帮助或建议，我们将不胜感激。