Clever Geek Handbook

Hide fixed footer?

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

greetings.

+3


source to share


4 answers


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 other nice effects

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

Another method like Bram Vanroy :

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

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


source


This will require JavaScript

. The button click event handler should change the display

footer property to none

.



+3


source


There is only a javascript version available with a button and id "button" and footer "footer". This method will allow you to show the footer 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();
});
+3


source


A good tutsplus video tutorial for what you need. This is a simple bit of jQuery.

+2


source






More articles:


All Articles