python-coder python-coder - 5 months ago 8
HTML Question

jQuery hide/show a div

Here is my HTML structure.

<div id="head"></div>
<div id="content"></div>
<div id="footer"></div>


Now when I hide the
content
div, using
$("#content").hide
, my footer block comes up. I want that my footer block should be remain fixed at the bottom, even if I hide it or show it.

How can I do it?

Answer

display: none and visibility: hidden are different.

If you choose display: none, the DIV will no longer occupying the space, thus the footer will come up.

Therefore, you should use (as per @putvande said in comment):

$('#content').css('visibility','hidden')

If you set visibility: hidden, the DIV will be hidden (invisible), but it still occupies the space, as its display CSS is still display: block by default.

To show the contents again, set:

$('#content').css('visibility','visible')

Moreover, normally footer uses position: fixed and bottom: 0 to fix it to the bottom of the page, which will probably avoid the issue you encounter right now.

Comments