Q:

How to keep my include from making my page longer

I'm not sure what I'm doing wrong here but I have a limited amount of work with js and php so this might be an easy fix:
I have a resume page and I'm using js to replace a target div on my resume as needed. This is working fine and I've placed the additional divs in a hidden div at the bottom of the page. Instead of coding the included content into the page I was calling it in via a set of php includes. I assumed as they were inside a visibility hidden div they shouldn't impact the page. While they are not visible they do make the page longer by the same height as the 3 includes combined.
Is there an easy fix to this or is it better to hard code the divs into the page itself?
(PLESE NOTE: I am having a problem adding the code clip but I can provide a link to the site if desired)

A:

What you actually is looking for is display: none; property, rather than visibility: hidden;. The difference is, visibility: hidden; still occupy the same space it would with the content displayed, while display: none; removes the div altogether.
Also, note that display is not only used to show or hide an element, it also set the inline/block behaviour of an element among others, but generally: as long as it's a div, you should most likely switch between display: none; and display: block;. If it's an <a>, <b>, <span> or some other inline element, go with display: inline; instead of block. You could take a look here.
Also, the display property is easily configurable with jQuery with the $('div').show() and $('div').hide() functions.
Hope this helps. Let me know if I'm not being helpful!

