Setting a cookie to remember hidden element state

Question

I'm having trouble setting a cookie to remember whether certain elements have been hidden or not. The script I'm using (which came from another answer on here) seems to work in terms of hiding or showing the elements I'm trying to control, but doesn't appear to be working in terms of 'remembering' the current state when reloading/changing pages.

On the site I'm currently developing, only two pages currently have this code:

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

The javascript used on the pages (directly before the tag) is as follows:

<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>

The HTML for the relevant elements is:

<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>

From reading some of the other questions and answers, I tried adding to all of the elements, both by editing the CSS and also by adding the code to the HTML, but this made the elements disappear completely.

It crossed my mind that what I actually need is a piece of code which will create a cookie when the elements are hidden by the user, but will also delete/amend the cookie if the elements are shown again. I realise that what I have at the moment (although not working properly) is code which effectively has an 'ON' switch, but no 'OFF' switch.

Any help or advice would be very greatly appreciated.

Answer 1

What you are missing is calling some code that will set hide the footer if it was previously hidden. You never do this. The checkFooter function would the be the obvious one for this. You don't use it right now, but you should. You should however reverse its logic so that it hides the footer if the getCookie('footer_state') == false. So change the function like this:

function checkFooter() {
    if (getCookie('footer_state') == false) { // if popup WAS closed
        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';
    }   
}

Now make sure you call the method when the page loads. Add the following code at the bottom of your page with the google analytics and mCustomScrollBar scripts:

<script>
    checkFooter();
</script>