Hi I was wondering is there a way to hide a fixed footer with a button, so it can be closed by the user if they want to see more of the screen and vise versa. Is there a way to do this with css or will it require javascript?

cheers.

Hi I was wondering is there a way to hide a fixed footer with a button, so it can be closed by the user if they want to see more of the screen and vise versa. Is there a way to do this with css or will it require javascript?

cheers.

• javascript
• css
• footer
• css-position

4 Answers 4

JavaScript

<input type="button" id="myButton" onclick="HideFooter()" />

function HideFooter()
{
    var display = document.getElementById("myFooter").style.display;
    if(display=="none")
        document.getElementById("myFooter").style.display="block";
    else
        document.getElementById("myFooter").style.display="none";
}

JQuery

$("#myButton").click(function(){

    if($("#myFooter").is(":visible"))
        $("#myFooter").hide();
    else
        $("#myFooter").show();
});

If you want some other nice effects

$("#myFooter").fadeOut(500);
$("#myFooter").slideUp(500);
$("#myFooter").slideToggle(500); //Hide and Show

Another method, as Bram Vanroy Suggested:

$("#myButton").click(function(){

    $("#myFooter").toggle();
});

It will require JavaScript. Your button click event handler needs to change the display property of the footer to none.

Here's a javascript only version, with the button having and id of "button" and footer id of "footer". This method will allow you to show the footer again after hiding it, if the user wants to see it again.

   var button = document.getElementById('button');

    button.onclick = function() {
        var div = document.getElementById('footer');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    }
    else {
        div.style.display = 'block';
    }
};

Or with jQuery:

$("#button").click(function() { 
    $("#footer").toggle();
});

A nice tutsplus video tutorial for exactly what you need. It's a simple bit of jQuery.