How to create Html lock on part of page using JS? (may be Jquery)

Question

I want a part of my HTML page to be visiable to users with enabeld JavaScript only after clicking on to some button, while users with no JS support will seeit always.

So I mean we have a normal page with header and body but with no footer unteel some button is clicked. (while wievers that use no JS modes will see footer always.)

Answer 1

jQuery:

$(function (){
  $('#footer').hide();
  $('#mybutton').click(function (){
    $('#footer').show();
  });
});

Answer 2

You could hide the footer using javascript and show it when a button is clicked:

$(function() {
    $('#footer').hide();
    $('#someButton').click(function() {
        $('#footer').show();
    });
});

Answer 3

"Vanilla JavaScript"

window.onload = function () {
    var footer = document.getElementById('footer'), someButton = document.getElementById('someButton');
    footer.style.display = "none";

    someButton.onclick = function () {
        footer.style.display = "block";
    };
};