-1

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)

user1311848
  • 55
  • 2
  • 11

1 Answers1

1

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!

Community
  • 1
  • 1
Genie
  • 76
  • 1